Vuetify Vue CLI Plugin

2.5.8 · deprecated · verified Sun Apr 19

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.

Common errors

```
This command can only be run inside a Vue CLI project.
```
cause The `vue add vuetify` command was executed outside of a project created with `vue create`.

fix Navigate into your Vue CLI project directory (e.g., `cd my-app`) before running `vue add vuetify`.
```
Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Can't find stylesheet to import.
```
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.

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`.
```
[Vue warn]: Unknown custom element: <v-list-item-content> - did you register the component correctly?
```
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.

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.
```
Error: Cannot read properties of undefined (reading 'options') or TypeError: The 'compilation' argument must be an instance of Compilation
```
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.

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.

Warnings

breaking 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.
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.
breaking 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.
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.
breaking 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.
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.
gotcha 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`.
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.

Install

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

Quickstart

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.

# Ensure Vue CLI 3 is installed globally (if not already)
# npm install -g @vue/cli # or yarn global add @vue/cli

# Create a new Vue 2 project (this plugin is primarily for Vue CLI 3 with Vue 2)
vue create my-vuetify-app --default

# Navigate into your application folder
cd my-vuetify-app

# Install the Vuetify plugin. This will prompt for configuration options.
# Choose 'Default (recommended)' for a quick start.
vue add vuetify

# Start the development server to see your Vuetify-powered app
npm run serve

view raw JSON →