{"id":12424,"library":"vue-cli-plugin-quasar","title":"Quasar Framework Vue CLI Plugin","description":"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.","status":"maintenance","version":"5.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/quasarframework/vue-cli-plugin-quasar","tags":["javascript","quasar","plugin","vue","cli"],"install":[{"cmd":"npm install vue-cli-plugin-quasar","lang":"bash","label":"npm"},{"cmd":"yarn add vue-cli-plugin-quasar","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-cli-plugin-quasar","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"The core framework that this plugin integrates into the Vue CLI project.","package":"quasar","optional":false},{"reason":"The underlying JavaScript framework for the project, specifically Vue 3.","package":"vue","optional":false},{"reason":"This package is a plugin for Vue CLI, inherently depending on the CLI's service for project operations.","package":"vue-cli-service","optional":false},{"reason":"Required for Sass pre-processing, often needing specific versions for compatibility with Webpack loaders.","package":"sass","optional":false},{"reason":"Webpack loader responsible for processing Sass files.","package":"sass-loader","optional":false},{"reason":"Provides Right-to-Left (RTL) language support; replaced `postcss-rtl` in recent versions.","package":"postcss-rtlcss","optional":true}],"imports":[{"note":"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.","wrong":"import { QuasarPlugin } from 'vue-cli-plugin-quasar'","symbol":"Plugin Installation/Activation","correct":"$ vue invoke quasar"},{"note":"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.","wrong":"import QuasarConfig from 'vue-cli-plugin-quasar/config'","symbol":"Quasar Configuration Options","correct":"// vue.config.js\nmodule.exports = {\n  pluginOptions: {\n    quasar: {\n      importStrategy: 'auto',\n      rtlSupport: true\n    }\n  }\n}"},{"note":"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.","wrong":"import { Quasar } from 'vue-cli-plugin-quasar'","symbol":"Auto-Imported Quasar Components","correct":"// MyComponent.vue\n<template>\n  <q-btn label=\"Hello Quasar\" @click=\"sayHi\" />\n</template>\n<script setup>\nimport { QBtn } from 'quasar' // For type hinting and explicit imports, though often implicit\nconst sayHi = () => alert('Hi!');\n</script>"}],"quickstart":{"code":"# Ensure Vue CLI v5 is installed\nvue --version\n\n# If Vue CLI v5 is not installed, install or upgrade globally:\n# npm install -g @vue/cli\n# # OR\n# yarn global add @vue/cli\n\n# Create a new Vue CLI project (choose Vue 3 and default options for simplicity)\nvue create my-quasar-app\n\n# Navigate into your newly created project folder\ncd my-quasar-app\n\n# (Recommended) Commit existing changes before adding the plugin, to easily revert if needed\n# git init\n# git add .\n# git commit -m \"Initial Vue CLI project\"\n\n# Add the Quasar CLI plugin as a development dependency\nyarn add --dev vue-cli-plugin-quasar\n# # OR\n# npm install --save-dev vue-cli-plugin-quasar\n\n# Invoke the plugin to integrate Quasar Framework into your project\nvue invoke quasar\n# Follow the prompts; it's generally recommended to allow the plugin to replace example files.\n\n# Now you can run your Quasar-enabled Vue application\nyarn serve\n# # OR\n# npm run serve","lang":"javascript","description":"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."},"warnings":[{"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`.","message":"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.","severity":"breaking","affected_versions":">=5.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":"5.0.1"},{"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`).","message":"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.","severity":"breaking","affected_versions":">=5.1.2"},{"fix":"Update your `quasar` package to `^2.16.0` or higher in your `package.json` and reinstall project dependencies.","message":"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.","severity":"gotcha","affected_versions":">=5.1.0"},{"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.","message":"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`.","severity":"gotcha","affected_versions":">=5.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","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`.","error":"Module not found: Error: Can't resolve 'loader-utils' in '.../node_modules/vue-cli-plugin-quasar'"},{"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.","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.","error":"Error: Trailing comma is not permitted in JSON"},{"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.","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.","error":"DEP_WEBPACK_RULE_LOADER_OPTIONS_STRING: DeprecationWarning: Using a string as a loader's options is deprecated. Please use an object instead."}],"ecosystem":"npm"}