@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 https://github.com/unjs/unimport/pull/447.

[!NOTE]
Nuxt 3.16.2 requires a patch to support Vue Lazy Hydration, fixed in Nuxt 3.17.0: check https://github.com/nuxt/nuxt/pull/31649.

Feature / Package	vite-plugin-vuetify	webpack-plugin-vuetify	styles[1]	resolvers[2]	presets[3]	Nuxt[4]
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

---

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 ↩︎