@unvuetify

Unified Vuetify utilities for Vite and Nuxt.

🚨 Motivation

This monorepo has been created due to the existing limitations when using vite-plugin-vuetify/webpack-plugin-vuetify and the new features added in Vue 3.5 and Nuxt 3.16: Vue Lazy Hydration and Nuxt 3. Check the comparison table for more details.

@unvuetify is an alternative to vite-plugin-vuetify, you can still use vite-plugin-vuetify or webpack-plugin-vuetify: the packages in this monorepo have been created to provide support for Vite and Nuxt 3 applications, and to provide a more flexible and extensible API via unplugin-vue-components and unplugin-auto-import/unimport.

🚀 Features

• 👌 ESM-only packages
• ⚡ Fully Tree Shakable: use unplugin-vue-components resolvers or unplugin-auto-import presets and only used Vuetify composables, components and directives will be included in the final bundle
• 💥 Vue Lazy Hydration support: ready to use Vue Lazy Hydration with Vuetify components and Nuxt 3
• 🔌 Extensible: allow prefixing Vuetify components, directives and composables with Vuetify prefix
• ✨ VSCode directives suggestions
• ⚙️ Nuxt utilities: drop a simple Nuxt module and it will auto-import all Vuetify components, directives and composables for you
• 🌍 Nuxt I18n utilities: install @nuxtjs/i18n Nuxt module, drop a simple module to configure Vuetify with i18n support
• 🦾 Type Strong: written in TypeScript

🛠️ Packages

• @unvuetify/shared: utilities to resolve Vuetify components and directives
• @unvuetify/unimport-presets: presets to auto-import Vuetify composables and directives
• @unvuetify/unplugin-vue-components-resolvers: resolvers to auto-import Vuetify components and directives
• @unvuetify/vite-styles-plugin: Vite plugin to load Vuetify sass/scss styles with Nuxt 3 SSR support
• @unvuetify/nuxt-utils: utilities to configure Vuetify composables, directives, components and sass/scss styles in your Nuxt 3 application
• @unvuetify/nuxt-i18n-utils: utilities to configure Vuetify with @nuxtjs/i18n in your Nuxt application

🦄 Usage

There are a lot of packages/modules in this repository, our suggestion is to use the following packages when using:

• Vite:
  • @unvuetify/unimport-presets for composables and directives presets via unplugin-auto-import
  • @unvuetify/unplugin-vue-components-resolvers resolvers for components via unplugin-vue-components
  • @unvuetify/vite-styles-plugin for styles
• Nuxt:
  • vuetify-nuxt-module for all Vuetify features
• Nuxt basic (check nuxt-utils usage):
  • @unvuetify/nuxt-utils via Nuxt module using configureVuetify function
• Nuxt basic i18n (check nuxt-utils usage and nuxt-i18n-utils usage):
  • @unvuetify/nuxt-utils via Nuxt module using configureVuetify function
  • @unvuetify/nuxt-i18n-utils via Nuxt module using configureI18n function

📥 Playgrounds

You can open @unvuetify monorepo in StackBlitz:

Warning

@nuxt/fonts dependency removed and settings.scss files updated to run Nuxt playgrounds when running at StackBlitz.

or just play with individual playgrounds:

Warning

@nuxt/fonts dependency removed and settings.scss file updated when running Nuxt playgrounds at StackBlitz.

Example	Source	Playground
basic-nuxt	GitHub
basic-resolvers	GitHub
basic-unimport	GitHub
nuxt-i18n	GitHub
prefix-nuxt	GitHub
prefix-resolvers	GitHub
prefix-unimport	GitHub

👀 Package features comparison

Note

unimport requires a patch to support prefixing Vuetify directives in Nuxt, fixed in unimport v5.0.1 release: check unjs/unimport#447.

Note

Nuxt 3.16.2 requires a patch to support Vue Lazy Hydration, fixed in Nuxt 3.17.0: check nuxt/nuxt#31649.

Feature / Package	vite-plugin-vuetify	webpack-plugin-vuetify	styles1	resolvers2	presets3	Nuxt4
auto-import composables	❌	❌	❌	❌	✅	✅
auto-import components	✅	✅	❌	✅	✅5	✅
auto-import directives	✅	✅	❌	✅	✅	✅
auto-import labs components	✅	✅	❌	✅	✅	✅
sass/scss variables	✅	✅	✅	❌	❌	✅
sass/scss variables with Vite/Nuxt 3 SSR	✅6	❓7	✅	❌	❌	✅
prefix composables, directives and components	❌	❌	❌	✅	✅	✅
Nuxt Lazy Hydration	❌	❌	❌	❌	✅8	✅
VSCode directives suggestions	✅9	❌	❌	❌	✅	✅

📄 License

MIT License © 2025-PRESENT Joaquín Sánchez

Footnotes

1. @unvuetify/vite-styles-plugin. ↩

2. @unvuetify/unplugin-vue-components-resolvers. ↩

3. @unvuetify/unimport-presets. ↩

4. vuetify-nuxt-module will support all the features once updated using the packages in this monorepo.
   @unvuetify/nuxt-utils supports all the features, but it is not a drop-in replacement for vuetify-nuxt-module. ↩

5. @unvuetify/unimport-presets components utilities can be used with Nuxt components loader, won't work with Vite. ↩

6. vite-plugin-vuetify will work, but we can get some warnings about missing sources. ↩

7. webpack-plugin-vuetify not tested with Nuxt 3 with or without SSR. ↩

8. @unvuetify/unimport-presets components utilities can be used with Nuxt components loader. ↩

9. Vuetify 3.9.0+ includes GlobalDirectives in the Vue module augmentation ↩