Quasar Framework Vue CLI Plugin

5.1.2 · maintenance · verified Sun Apr 19

The `vue-cli-plugin-quasar` package facilitates the integration of Quasar Framework v2 with Vue CLI v5 projects. It provides the necessary webpack configurations, build tools, and scaffolding to jumpstart the development of Quasar-powered Vue 3 applications. While this plugin enables developers to utilize Quasar within an existing Vue CLI ecosystem, it's crucial to acknowledge that Vue CLI itself is currently in maintenance mode. For a comprehensive and premium Quasar development experience, which includes robust support for building Mobile and Electron applications, along with seamless upgrades, the Quasar Framework team strongly recommends using the dedicated Quasar CLI. The current stable version of this plugin is 5.1.2. Its primary role is to configure a Vue CLI project to correctly bundle and optimize Quasar components, rather than acting as a runtime library itself.

Common errors

```
Module not found: Error: Can't resolve 'loader-utils' in '.../node_modules/vue-cli-plugin-quasar'
```
cause When using Yarn 2 Plug'n'Play (PNP) mode, an implicit dependency on `loader-utils` by `vue-cli-plugin-quasar` was not explicitly listed in its `package.json`.

fix Upgrade `vue-cli-plugin-quasar` to version 5.0.2 or higher, which includes a fix for this Yarn 2 PNP compatibility issue by adding `loader-utils` as a dependency.
```
Error: Trailing comma is not permitted in JSON
```
cause Older versions of the plugin contained a bug that caused incorrect transformation of Quasar imports, sometimes introducing trailing commas in generated code or configuration, leading to parse errors.

fix Upgrade `vue-cli-plugin-quasar` to version 4.0.3 or higher to resolve issues related to incorrectly transformed imports that could cause syntax errors.
```
DEP_WEBPACK_RULE_LOADER_OPTIONS_STRING: DeprecationWarning: Using a string as a loader's options is deprecated. Please use an object instead.
```
cause Older plugin versions used a deprecated method for passing options to Webpack loaders, triggering warnings in Webpack 5 due to changes in its API.

fix Upgrade `vue-cli-plugin-quasar` to version 4.0.2 or higher, which includes a fix addressing Webpack 5 loader options deprecations, resolving these warning messages.

Warnings

breaking Vue CLI v5 is a strict requirement for `vue-cli-plugin-quasar` v5.x. Earlier versions of Vue CLI (e.g., v4) are incompatible and not supported, leading to build errors or unexpected behavior.
Fix: Verify your Vue CLI version with `vue --version`. If it's not `5.x.x`, upgrade Vue CLI globally: `npm install -g @vue/cli` or `yarn global add @vue/cli`.
breaking When upgrading a project from Vue CLI v4 to v5 and using this plugin, specific dependency versions for `sass`, `sass-loader`, and `postcss-rtl` were crucial. Failure to pin these to the correct versions (`sass: 1.32.12`, `sass-loader: ^12.0.0`, `postcss-rtl: ^3.5.3`) could result in build failures.
Fix: Manually ensure your `package.json` dependencies match these specific versions (if applicable) and run `npm install` or `yarn install` when migrating from Vue CLI v4.
breaking Since `vue-cli-plugin-quasar` v5.1.2, `postcss-rtlcss` has replaced `postcss-rtl`. If you had `postcss-rtl` installed, you may need to manually uninstall it and install `postcss-rtlcss` to ensure correct RTL processing and avoid potential conflicts.
Fix: If you use RTL support, run `npm uninstall postcss-rtl` (or `yarn remove postcss-rtl`) and then `npm install postcss-rtlcss` (or `yarn add postcss-rtlcss`).
gotcha The `vue-cli-plugin-quasar` version 5.1.0 and above requires Quasar Framework v2.16+ as a minimum dependency. Using an older Quasar version will lead to compatibility issues.
Fix: Update your `quasar` package to `^2.16.0` or higher in your `package.json` and reinstall project dependencies.
gotcha Vue CLI, which is fundamental to this plugin, is currently in maintenance mode. For the most robust and feature-rich Quasar development experience, particularly for mobile/Electron apps and seamless version upgrades, the Quasar team recommends using the official Quasar CLI directly instead of `vue-cli-plugin-quasar`.
Fix: For new projects or those requiring advanced Quasar features, consider initiating your project with the official Quasar CLI (e.g., `npm init quasar`) rather than Vue CLI with this plugin.

Install

npm install vue-cli-plugin-quasar npm
yarn add vue-cli-plugin-quasar yarn
pnpm add vue-cli-plugin-quasar pnpm

Imports

Plugin Installation/Activation
wrong:
```
import { QuasarPlugin } from 'vue-cli-plugin-quasar'
```
correct:
```
$ vue invoke quasar
```
This plugin integrates Quasar into a Vue CLI project via command-line invocation, not direct JavaScript imports into application code. The `invoke` command runs the plugin's setup scripts, modifying project files and configurations.
Quasar Configuration Options
wrong:
```
import QuasarConfig from 'vue-cli-plugin-quasar/config'
```
correct:
```
// vue.config.js
module.exports = {
  pluginOptions: {
    quasar: {
      importStrategy: 'auto',
      rtlSupport: true
    }
  }
}
```
Quasar-specific build and feature configurations are managed through the `quasar` object within `pluginOptions` in your `vue.config.js` file, or directly in `package.json` if selected during `vue create`. This is how you 'import' and apply the plugin's configurable behavior.
Auto-Imported Quasar Components
wrong:
```
import { Quasar } from 'vue-cli-plugin-quasar'
```
correct:
```
// MyComponent.vue
<template>
  <q-btn label="Hello Quasar" @click="sayHi" />
</template>
<script setup>
import { QBtn } from 'quasar' // For type hinting and explicit imports, though often implicit
const sayHi = () => alert('Hi!');
</script>
```
The `vue-cli-plugin-quasar` configures Webpack to automatically tree-shake and import Quasar components (e.g., `QBtn`, `QCard`) as they are used in your templates. You typically import components *from the `quasar` package* itself, relying on the plugin's setup for efficient bundling, rather than importing symbols directly from the plugin.

Quickstart

This quickstart guides you through setting up a new Vue CLI v5 project and integrating the Quasar Framework using this plugin, demonstrating the initial project creation, plugin installation, invocation, and how to start the development server.

# Ensure Vue CLI v5 is installed
vue --version

# If Vue CLI v5 is not installed, install or upgrade globally:
# npm install -g @vue/cli
# # OR
# yarn global add @vue/cli

# Create a new Vue CLI project (choose Vue 3 and default options for simplicity)
vue create my-quasar-app

# Navigate into your newly created project folder
cd my-quasar-app

# (Recommended) Commit existing changes before adding the plugin, to easily revert if needed
# git init
# git add .
# git commit -m "Initial Vue CLI project"

# Add the Quasar CLI plugin as a development dependency
yarn add --dev vue-cli-plugin-quasar
# # OR
# npm install --save-dev vue-cli-plugin-quasar

# Invoke the plugin to integrate Quasar Framework into your project
vue invoke quasar
# Follow the prompts; it's generally recommended to allow the plugin to replace example files.

# Now you can run your Quasar-enabled Vue application
yarn serve
# # OR
# npm run serve

view raw JSON →