vite-plugin-vuetify

2.1.3 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Cannot find module 'vuetify/styles' or its corresponding type declarations. ↓

cause Missing import of 'vuetify/styles' in main app entry or vuetify plugin file.

fix

Add 'import "vuetify/styles"' in your Vuetify setup file (e.g., plugins/vuetify.js).

error [vite] Internal server error: [vite-plugin-vuetify] Vuetify plugin must be placed after @vitejs/plugin-vue. ↓

cause Plugin order: vuetify() placed before vue() in plugins array.

fix

Reorder plugins: [vue(), vuetify()].

error Uncaught TypeError: Cannot read properties of undefined (reading 'install') ↓

cause Vuetify not properly installed because autoImport is off and components not registered.

fix

Enable autoImport: true in vuetify() options, or manually register components.

error The requested module 'vuetify' does not provide an export named 'VBtn' ↓

cause Using named import for components instead of relying on auto-import.

fix

Remove component imports and enable autoImport: true.

Warnings

breaking vite-plugin-vuetify v2 only works with Vuetify 3. Do not use with Vuetify 2. ↓

fix Use vue-cli-plugin-vuetify or webpack-plugin-vuetify for Vuetify 2.

breaking Requires Vite >=5. Node >=18.0.0 or >=20.0.0. ↓

fix Update Vite to version 5+ and Node to 18+ or 20+.

gotcha autoImport.ignore values are case-sensitive. Component names must match Vuetify's export casing exactly. ↓

fix Use exact names like 'VAlert', 'Ripple'. Refer to Vuetify documentation.

deprecated The 'styles' option with 'none' removes all Vuetify styles; you must import them manually if needed. ↓

fix If you need styles, use 'vuetify/styles' import or keep default.

gotcha transformAssetUrls must be spread into vue() plugin options and vuetify() added separately, not nested. ↓

fix Use: vue({ template: { transformAssetUrls } }), then vuetify().

Install

npm install vite-plugin-vuetify

yarn add vite-plugin-vuetify

pnpm add vite-plugin-vuetify

Imports

vuetify

wrong

import { vuetify } from 'vite-plugin-vuetify'

correct

import vuetify from 'vite-plugin-vuetify'

Default export, not named. For the plugin instance.

transformAssetUrls

wrong

import transformAssetUrls from 'vite-plugin-vuetify'

correct

import { transformAssetUrls } from 'vite-plugin-vuetify'

Named export for asset URL transformation in Vue template options.

VuetifyPlugin

wrong

import { VuetifyPlugin } from 'vite-plugin-vuetify'

correct

import VuetifyPlugin from 'vite-plugin-vuetify'

Default export; renamed import for clarity. Common mistake using named import.

Quickstart

Basic setup: auto-imports Vuetify components and directives, with styles import in a separate file.

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'

export default defineConfig({
  plugins: [
    vue(),
    vuetify({ autoImport: true }), // default
  ],
})

// plugins/vuetify.js
import 'vuetify/styles'
import { createVuetify } from 'vuetify'

export default createVuetify()