vite-plugin-vuetify
TypeScript icon, indicating that this package has built-in type declarations

2.0.3 • Public • Published

vite-plugin-vuetify

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

Include labs components

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

Ignoring components or directives

// vite.config.js
plugins: [
  vue(),
  vuetify({ 
    autoImport: {
      ignore: [
        'VAlert', // Component name
        'Ripple', // Directive name
      ]
    }
  }), 
]

Note ignore values are case-sensitive

Style loading

Customising variables

// vite.config.js
plugins: [
  vue(),
  vuetify({ styles: { configFile: 'src/settings.scss' } }),
]
// plugins/vuetify.js
import 'vuetify/styles'
import { createVuetify } from 'vuetify'

export default createVuetify()
// settings.scss
@use 'vuetify/settings' with (
  $color-pack: false,
  $utilities: false,
);

settings.scss can be used in your own components to access vuetify's variables.

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' }),
]

Image loading

https://github.com/vitejs/vite-plugin-vue/blob/main/packages/plugin-vue/README.md#asset-url-handling

// vite.config.js
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'

export default {
  plugins: [
    vue({ 
      template: { transformAssetUrls }
    }),
    vuetify(),
  ],
}

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 2.0.3
    36,958
    • latest

Version History

Package Sidebar

Install

npm i vite-plugin-vuetify

Weekly Downloads

134,344

Version

2.0.3

License

MIT

Unpacked Size

27.1 kB

Total Files

9

Last publish

Collaborators

  • johnjleider
  • kaelwd