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.
npm install vue-cli-plugin-vuetifyNo compatibility data collected yet for this library.
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.
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.
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.
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.
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.
Navigate into your Vue CLI project directory (e.g., `cd my-app`) before running `vue add vuetify`.
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`.
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.
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.