Registry / web-framework / vue-cli-plugin-quasar

vue-cli-plugin-quasar

library5.1.2jsnpmunverified

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.

web-framework

npm install vue-cli-plugin-quasar

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-CLI-PLUGIN-QUA

vue-cli-plugin-quasar

web-frameworkjavascriptv5.1.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Plugin Installation/Activation

✓ $ vue invoke quasar

✗ import { QuasarPlugin } from 'vue-cli-plugin-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

✓ // vue.config.js module.exports = { pluginOptions: { quasar: { importStrategy: 'auto', rtlSupport: true } } }

✗ import QuasarConfig from 'vue-cli-plugin-quasar/config'

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

✓ // 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>

✗ import { Quasar } from 'vue-cli-plugin-quasar'

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.

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

Debug

Known issues

breakingVue 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`.

affects: >=5.0.0

breakingWhen 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.

affects: 5.0.1

breakingSince `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`).

affects: >=5.1.2

gotchaThe `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.

affects: >=5.1.0

gotchaVue 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.

affects: >=5.0.0

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'loader-utils' in '.../node_modules/vue-cli-plugin-quasar'

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

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.

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.

Upgrade

Version history

5.1.2latest on npm

Audit

Dependencies

quasarrequiredThe core framework that this plugin integrates into the Vue CLI project.

vuerequiredThe underlying JavaScript framework for the project, specifically Vue 3.

vue-cli-servicerequiredThis package is a plugin for Vue CLI, inherently depending on the CLI's service for project operations.

sassrequiredRequired for Sass pre-processing, often needing specific versions for compatibility with Webpack loaders.

sass-loaderrequiredWebpack loader responsible for processing Sass files.

postcss-rtlcssoptionalProvides Right-to-Left (RTL) language support; replaced `postcss-rtl` in recent versions.

Agent activity

13 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/quasarframework/vue-cli-plugin-quasar ↗

packagehttps://www.npmjs.com/package/vue-cli-plugin-quasar ↗