@vuetify/vite-plugin

@vuetify/vite-plugin

Automatic imports

// vite.config.js
plugins: [
  vue(),
  vuetify({ autoImport: true }), // Enabled by default
]

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

export default createVuetify()

Style loading

Customising variables

// vite.config.js
plugins: [
  vue(),
  vuetify({ styles: 'expose' }),
]

// plugins/vuetify.js
import './main.scss'
import { createVuetify } from 'vuetify'

export default createVuetify()

// main.scss
@use 'vuetify/styles' with (
  $color-pack: false,
  $utilities: false,
);

Remove all style imports

// vite.config.js
plugins: [
  vue(),
  vuetify({ styles: 'none' }),
]

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

export default createVuetify()

Import sass from source

Vuetify 3 uses precompiled css by default, these imports can optionally be modified to point to sass files instead:

// vite.config.js
plugins: [
  vue(),
  vuetify({ styles: 'sass' }),
]