@vuetify/unplugin-styles

Unified Vuetify styles unplugin for Vite, Nuxt, Webpack, Rspack, and more.

Install

npm i @vuetify/unplugin-styles

Usage

Global Mode

Define settings in the plugin configuration.

// vite.config.ts
import VuetifyStyles from '@vuetify/unplugin-styles/vite'

export default defineConfig({
  plugins: [
    VuetifyStyles({ settings: './src/vuetify.settings.scss' }),
  ],
})

// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core'
import VuetifyStyles from '@vuetify/unplugin-styles/rspack'

export default defineConfig({
  tools: {
    rspack: {
      plugins: [
        VuetifyStyles({ settings: './src/vuetify.settings.scss' }),
      ],
    },
  },
})

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@vuetify/unplugin-styles/nuxt'],
  unpluginVuetify: {
    settings: '@/vuetify.settings.scss',
  },
})

Then import styles in your entry file:

import 'vuetify/styles'

Per Import Mode

Define settings directly in the import statement.

Configure the plugin without options:

// vite.config.ts
import VuetifyStyles from '@vuetify/unplugin-styles/vite'

export default defineConfig({
  plugins: [
    VuetifyStyles(),
  ],
})

Then import with settings:

import 'vuetify/styles' with { settings: './vuetify.settings.scss' }

License

MIT License © 2026-PRESENT Andrei Elkin