vite-plugin-vuetify

What is vite-plugin-vuetify?

vite-plugin-vuetify is a Vite plugin that provides seamless integration with Vuetify, a popular Vue.js UI library. It simplifies the process of setting up Vuetify in a Vite project, offering features like automatic component registration, theme customization, and more.

What are vite-plugin-vuetify's main functionalities?

Automatic Component Registration

This feature allows you to automatically register Vuetify components in your Vite project, eliminating the need for manual imports.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';

export default defineConfig({
  plugins: [vue(), vuetify()]
});

Custom Theme Configuration

This feature allows you to customize the Vuetify theme directly within your Vite configuration file, making it easy to apply consistent styling across your application.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';

export default defineConfig({
  plugins: [vue(), vuetify({
    theme: {
      themes: {
        light: {
          primary: '#1976D2',
          secondary: '#424242',
          accent: '#82B1FF',
          error: '#FF5252',
          info: '#2196F3',
          success: '#4CAF50',
          warning: '#FFC107'
        }
      }
    }
  })]
});

Tree Shaking

Enabling tree shaking helps reduce the bundle size by including only the Vuetify components and styles that are actually used in your project.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';

export default defineConfig({
  plugins: [vue(), vuetify({
    treeShake: true
  })]
});

Other packages similar to vite-plugin-vuetify

vuetify-loader

vuetify-loader is a webpack loader that automatically imports Vuetify components as you use them. It offers similar functionality to vite-plugin-vuetify but is designed for use with webpack instead of Vite.

vite-plugin-vue2

vite-plugin-vue2 is a Vite plugin that provides support for Vue 2 projects. While it doesn't specifically target Vuetify, it can be used in conjunction with Vuetify to set up a Vue 2 project with Vite.

vite-plugin-vue-jsx

vite-plugin-vue-jsx is a Vite plugin that adds support for Vue JSX. It can be used alongside Vuetify to enable JSX syntax in your Vue components, offering a different approach to writing Vue components compared to the template syntax.

README

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