{"id":15027,"library":"vue-cli-plugin-vuetify","title":"Vuetify Vue CLI Plugin","description":"This package, `vue-cli-plugin-vuetify`, provides a streamlined method to integrate the Vuetify UI framework into Vue.js projects generated by Vue CLI 3. It automates critical initial setup tasks, including the configuration of webpack for features like Vuetify's a-la-carte tree-shaking, automatic hoisting of Sass variables, and updating `vue.config.js` to ensure Vuetify components are properly transpiled. The current stable version is 2.5.8, with its last significant update in late 2019. Its active development has ceased, largely mirroring the obsolescence of Vue CLI 3 itself, which reached maintenance mode and has been superseded by newer Vue CLI versions and modern build tools like Vite for Vue 3 applications. Vuetify 2, which this plugin supports, reached End of Life (EOL) on January 25th, 2025. This plugin's primary role was to simplify the onboarding process for Vuetify 2 within the specific Vue CLI 3 ecosystem, rather than offering runtime functionalities or being directly imported into application code.","status":"deprecated","version":"2.5.8","language":"javascript","source_language":"en","source_url":"https://github.com/vuetifyjs/vue-cli-plugin-vuetify","tags":["javascript","vuetify","vuetify plugin","vue-cli","vue-cli vuetify","vue-cli material","vue-cli-3","vue-cli-3 vuetify","vue-cli-3 material"],"install":[{"cmd":"npm install vue-cli-plugin-vuetify","lang":"bash","label":"npm"},{"cmd":"yarn add vue-cli-plugin-vuetify","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-cli-plugin-vuetify","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for underlying Vue CLI build tooling, supporting webpack 4 and 5.","package":"webpack","optional":false}],"imports":[],"quickstart":{"code":"# Ensure Vue CLI 3 is installed globally (if not already)\n# npm install -g @vue/cli # or yarn global add @vue/cli\n\n# Create a new Vue 2 project (this plugin is primarily for Vue CLI 3 with Vue 2)\nvue create my-vuetify-app --default\n\n# Navigate into your application folder\ncd my-vuetify-app\n\n# Install the Vuetify plugin. This will prompt for configuration options.\n# Choose 'Default (recommended)' for a quick start.\nvue add vuetify\n\n# Start the development server to see your Vuetify-powered app\nnpm run serve","lang":"javascript","description":"Demonstrates how to initialize a new Vue CLI 3 project and integrate Vuetify using the `vue add` command. This is the primary method of interacting with the plugin, which then configures the JavaScript/TypeScript project."},"warnings":[{"fix":"For new Vue 3 projects, it is recommended to use `create-vue` to scaffold Vite-based projects and integrate Vuetify 3 manually or using its dedicated presets. For existing Vue 2 projects, consider upgrading to Vuetify 2.7.x (the final release) and explore options for extended support if not migrating to Vue 3.","message":"The `vue-cli-plugin-vuetify` is specifically designed for Vue CLI 3 and Vuetify 2. It is not compatible with Vue CLI 4+ or Vue 3 projects. Using it with newer versions of Vue CLI or Vue will likely lead to configuration errors, build failures, or unexpected runtime issues. Vue CLI is in maintenance mode, and Vue 2 reached EOL on Dec 31st, 2023.","severity":"breaking","affected_versions":"*"},{"fix":"After upgrading to version 2.0.0, review `vue.config.js` and `src/sass/variables.s(a|c)ss` to ensure custom configurations are still respected or integrated correctly. It also improved performance significantly.","message":"Version 2.0.0 introduced significant changes to how the plugin bootstraps Sass variables and configures `transpileDependencies`. Projects with existing manual configurations for these aspects, especially those not using a-la-carte, might experience overrides or altered build behavior. Performance improvements were also noted.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"After installation, carefully review your `vue.config.js` for unintended changes. If you had a custom `src/sass/main.s(a|c)ss`, rename it to `variables.s(a|c)ss` to leverage automatic hoisting, or adjust `vue.config.js` to prevent conflicts.","message":"Version 1.0.0 automated the hoisting of `src/sass/variables.s(a|c)ss` and the updating of `vue.config.js` to transpile Vuetify. This can conflict with existing, manually managed `vue.config.js` settings or custom Sass import structures, potentially overriding user-defined configurations.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Check the plugin's release notes for specific `sass-loader` version requirements or recommendations. If issues arise, try updating or downgrading `sass-loader` to match known compatible versions for your `webpack` and `node-sass` setup. Ensure webpack is configured properly with the options object according to your `sass-loader` version.","message":"The plugin has had multiple fixes related to `sass-loader` compatibility (e.g., v1.0.2, v1.1.0). Incompatibility between `sass-loader`, `node-sass`, and webpack versions can lead to build errors. Vue CLI 4.x (which uses webpack 4 by default) often required `sass-loader@10` or older with `node-sass`.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Navigate into your Vue CLI project directory (e.g., `cd my-app`) before running `vue add vuetify`.","cause":"The `vue add vuetify` command was executed outside of a project created with `vue create`.","error":"This command can only be run inside a Vue CLI project."},{"fix":"Verify your `sass-loader` version is compatible with your webpack setup (refer to `warnings`). Ensure your main Sass variables file is correctly named `src/sass/variables.s(a|c)ss` if relying on the plugin's automatic hoisting, or explicitly configure `style-resources-loader` in `vue.config.js`.","cause":"Often caused by incorrect `sass-loader` configuration or version mismatch, or issues with custom variable files not being correctly resolved by the plugin's automation. This is a common problem with Vue CLI 3/4 projects integrating Sass.","error":"Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Can't find stylesheet to import."},{"fix":"Ensure that `Vue.use(Vuetify)` is called in your `main.js` or `plugins/vuetify.js` file, and that the `Vuetify` instance is correctly passed to the root Vue instance. If using `a-la-carte`, ensure all required components are explicitly imported and included in the `components` option of the `Vuetify` instance.","cause":"This error, common in Vuetify 2, often indicates that Vuetify components are not properly registered with Vue, or an `a-la-carte` setup is missing components. This can happen if the plugin's setup fails or is overridden.","error":"[Vue warn]: Unknown custom element: <v-list-item-content> - did you register the component correctly?"},{"fix":"Ensure you are on the latest `vue-cli-plugin-vuetify` version (2.5.8). Verify your Node.js and Vue CLI versions are compatible with the plugin's last known working environment (Vue CLI 3, Node 12-14 typically). If using a newer Vue CLI that defaults to webpack 5, this plugin is unlikely to work. Remove `node_modules` and `package-lock.json`/`yarn.lock` and reinstall dependencies.","cause":"These types of errors often indicate a version incompatibility between the plugin, Vue CLI, webpack, or Node.js. Specifically, the 'options' error was addressed in fixes around v2.0.1, and the 'compilation' error can appear with webpack 5 when underlying plugins are still designed for webpack 4.","error":"Error: Cannot read properties of undefined (reading 'options') or TypeError: The 'compilation' argument must be an instance of Compilation"}],"ecosystem":"npm"}