# vite-plugin-vuetify

> A Vite plugin for treeshaking Vuetify components and more

Latest version **2.1.3** (published 2026-01-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-vuetify
pnpm add vite-plugin-vuetify
yarn add vite-plugin-vuetify
bun add vite-plugin-vuetify
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.1.3 |
| Published | 2026-01-19 |
| First published | 2022-05-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | ^18.0.0 \|\| >=20.0.0 |
| Dependencies | 3 |
| Unpacked size | 30.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kael Watts-Deuchar |
| Maintainers | johnjleider, kaelwd, jsek, andreyyolkin |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-vuetify
- Repository: https://github.com/vuetifyjs/vuetify-loader
- Homepage: https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin
- Issues: https://github.com/vuetifyjs/vuetify-loader/issues
- npm.io page: https://npm.io/package/vite-plugin-vuetify

## Dependencies (3)

- [debug](https://npm.io/package/debug.md) ^4.3.3
- [upath](https://npm.io/package/upath.md) ^2.0.1
- [@vuetify/loader-shared](https://npm.io/package/@vuetify/loader-shared.md) ^2.1.2

## Recent versions

- 2.1.3 (latest) — 2026-01-19
- 2.1.2 — 2025-07-31
- 2.1.1 — 2025-04-03
- 2.1.0 — 2025-02-04
- 2.0.4 — 2024-08-04
- 2.0.3 — 2024-03-10
- 2.0.2 — 2024-02-28
- 2.0.1 — 2023-12-12
- 2.0.0 — 2023-12-12
- 1.0.2 — 2023-01-28
- 1.0.1 — 2022-12-11
- 1.0.0 — 2022-10-13
- 1.0.0-alpha.17 — 2022-09-12
- 1.0.0-alpha.16 — 2022-09-06
- 1.0.0-alpha.15 — 2022-08-31
- … 4 more at https://npm.io/package/vite-plugin-vuetify/versions

## README

# vite-plugin-vuetify

<div align="center">
  <a href="https://www.patreon.com/kaelwd">
    <img src="https://c5.patreon.com/external/logo/become_a_patron_button.png" alt="Become a Patron" />
  </a>
  <br>
  <a href="https://opencollective.com/vuetify">
    <img src="https://opencollective.com/static/images/become_sponsor.svg" alt="Donate to OpenCollective">
  </a>
</div>

## Automatic imports
```js
// vite.config.js
plugins: [
  vue(),
  vuetify({ autoImport: true }), // Enabled by default
]
```
```js
// plugins/vuetify.js
import 'vuetify/styles'
import { createVuetify } from 'vuetify'

export default createVuetify()
```

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

### Ignoring components or directives
```js
// vite.config.js
plugins: [
  vue(),
  vuetify({ 
    autoImport: {
      ignore: [
        'VAlert', // Component name
        'Ripple', // Directive name
      ]
    }
  }), 
]
```
Note `ignore` values are case-sensitive

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

export default createVuetify()
```
```scss
// 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
```js
// vite.config.js
plugins: [
  vue(),
  vuetify({ styles: 'none' }),
]
```
```js
// 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:

```js
// 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

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

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

---
_Source: https://npm.io/package/vite-plugin-vuetify · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._