Registry / web-framework / vite-plugin-vuetify

vite-plugin-vuetify

library2.1.3jsnpmunverified

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.

web-framework

npm install vite-plugin-vuetify

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-VUETIF

vite-plugin-vuetify

web-frameworkjavascriptv2.1.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

vuetify

✓ import vuetify from 'vite-plugin-vuetify'

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

Default export, not named. For the plugin instance.

transformAssetUrls

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

✗ import transformAssetUrls from 'vite-plugin-vuetify'

Named export for asset URL transformation in Vue template options.

VuetifyPlugin

✓ import VuetifyPlugin from 'vite-plugin-vuetify'

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

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

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()

Debug

Known issues

breakingvite-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.

affects: >=2.0.0

breakingRequires Vite >=5. Node >=18.0.0 or >=20.0.0.

fix

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

affects: >=2.0.0

gotchaautoImport.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.

affects: >=1.0.0

deprecatedThe '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.

affects: >=2.0.0

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

fix

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

affects: >=2.0.0

Errors

Common errors & fixes

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

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).

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

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

fix

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

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

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

fix

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

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

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

fix

Remove component imports and enable autoImport: true.

Upgrade

Version history

2.1.3latest on npm

Audit

Dependencies

viterequiredPeer dependency: requires Vite 5+ to function as a plugin.

vuerequiredPeer dependency: requires Vue 3.x for template processing.

vuetifyrequiredPeer dependency: required for tree-shaking components and directives.

Agent activity

14 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/vuetifyjs/vuetify-loader ↗

packagehttps://www.npmjs.com/package/vite-plugin-vuetify ↗

homepagehttps://next.vuetifyjs.com ↗