{"id":20690,"library":"vite-plugin-vuetify","title":"vite-plugin-vuetify","description":"A Vite plugin for automatic tree-shaking of Vuetify components, directives, and styles in Vue 3 projects. Version 2.1.3 supports Vuetify 3 and requires Vite >=5, Vue ^3.0.0, and Vuetify >=3. Ships TypeScript types. It provides auto-import for components and labs, style customization via SASS, and image asset transformation. Released under the Vuetify loader monorepo with monthly cadence.","status":"active","version":"2.1.3","language":"javascript","source_language":"en","source_url":"https://github.com/vuetifyjs/vuetify-loader","tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-plugin-vuetify","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-vuetify","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-vuetify","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: requires Vite 5+ to function as a plugin.","package":"vite","optional":false},{"reason":"Peer dependency: requires Vue 3.x for template processing.","package":"vue","optional":false},{"reason":"Peer dependency: required for tree-shaking components and directives.","package":"vuetify","optional":false}],"imports":[{"note":"Default export, not named. For the plugin instance.","wrong":"import { vuetify } from 'vite-plugin-vuetify'","symbol":"vuetify","correct":"import vuetify from 'vite-plugin-vuetify'"},{"note":"Named export for asset URL transformation in Vue template options.","wrong":"import transformAssetUrls from 'vite-plugin-vuetify'","symbol":"transformAssetUrls","correct":"import { transformAssetUrls } from 'vite-plugin-vuetify'"},{"note":"Default export; renamed import for clarity. Common mistake using named import.","wrong":"import { VuetifyPlugin } from 'vite-plugin-vuetify'","symbol":"VuetifyPlugin","correct":"import VuetifyPlugin from 'vite-plugin-vuetify'"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport vuetify from 'vite-plugin-vuetify'\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    vuetify({ autoImport: true }), // default\n  ],\n})\n\n// plugins/vuetify.js\nimport 'vuetify/styles'\nimport { createVuetify } from 'vuetify'\n\nexport default createVuetify()","lang":"javascript","description":"Basic setup: auto-imports Vuetify components and directives, with styles import in a separate file."},"warnings":[{"fix":"Use vue-cli-plugin-vuetify or webpack-plugin-vuetify for Vuetify 2.","message":"vite-plugin-vuetify v2 only works with Vuetify 3. Do not use with Vuetify 2.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Update Vite to version 5+ and Node to 18+ or 20+.","message":"Requires Vite >=5. Node >=18.0.0 or >=20.0.0.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Use exact names like 'VAlert', 'Ripple'. Refer to Vuetify documentation.","message":"autoImport.ignore values are case-sensitive. Component names must match Vuetify's export casing exactly.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If you need styles, use 'vuetify/styles' import or keep default.","message":"The 'styles' option with 'none' removes all Vuetify styles; you must import them manually if needed.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Use: vue({ template: { transformAssetUrls } }), then vuetify().","message":"transformAssetUrls must be spread into vue() plugin options and vuetify() added separately, not nested.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add 'import \"vuetify/styles\"' in your Vuetify setup file (e.g., plugins/vuetify.js).","cause":"Missing import of 'vuetify/styles' in main app entry or vuetify plugin file.","error":"Cannot find module 'vuetify/styles' or its corresponding type declarations."},{"fix":"Reorder plugins: [vue(), vuetify()].","cause":"Plugin order: vuetify() placed before vue() in plugins array.","error":"[vite] Internal server error: [vite-plugin-vuetify] Vuetify plugin must be placed after @vitejs/plugin-vue."},{"fix":"Enable autoImport: true in vuetify() options, or manually register components.","cause":"Vuetify not properly installed because autoImport is off and components not registered.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'install')"},{"fix":"Remove component imports and enable autoImport: true.","cause":"Using named import for components instead of relying on auto-import.","error":"The requested module 'vuetify' does not provide an export named 'VBtn'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}