vite-plugin-vuetify
Automatic imports
plugins: [
vue(),
vuetify({ autoImport: true }),
]
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
export default createVuetify()
Style loading
Customising variables
plugins: [
vue(),
vuetify({ styles: { configFile: 'src/settings.scss' } }),
]
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
export default createVuetify()
@use 'vuetify/settings' with (
$color-pack: false,
$utilities: false,
);
settings.scss
can be used in your own components to access vuetify's variables.
Customising variables (old method)
plugins: [
vue(),
vuetify({ styles: 'expose' }),
]
import './main.scss'
import { createVuetify } from 'vuetify'
export default createVuetify()
@use 'vuetify' with (
$color-pack: false,
$utilities: false,
);
Remove all style imports
plugins: [
vue(),
vuetify({ styles: 'none' }),
]
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:
plugins: [
vue(),
vuetify({ styles: 'sass' }),
]
Image loading
https://github.com/vitejs/vite/tree/main/packages/plugin-vue#asset-url-handling
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
export default {
plugins: [
vue({
template: { transformAssetUrls }
}),
vuetify(),
],
}