Vuetify Nuxt Module

Zero-config Nuxt Module for Vuetify

🚀 Features

📖 Full documentation & guides

• 👌 Zero-Config: sensible built-in default Vuetify configuration for common use cases
• ⚡ Fully Tree Shakable: by default, only the Vuetify components you use are imported
• 🪄 Auto-Import: Vuetify components and composables are auto-imported — no manual imports needed
• 🔌 Extensible: customize the Vuetify configuration via Nuxt Runtime Hooks, Nuxt Layers, the vuetify:registerModule module hook, or a dedicated vuetify.config file
• 💥 SSR: automatic SSR detection and configuration, including HTTP Client Hints
• ✨ Configurable Styles: configure your variables using Vuetify SASS Variables
• 🛠️ Directives & Labs: optional directives and labs components registration
• 🎭 Icons: pure-CSS icons (UnoCSS), icon fonts (CDN or local), SVG packs (@mdi/js, FontAwesome), and multiple icon sets
• 🌍 I18n: integrate @nuxtjs/i18n for Vuetify internationalization, with auto-imported Vuetify locale messages
• 📆 Date Components: use Vuetify date components via the @date-io adapters
• 🎨 Blueprints: scaffold quickly with Vuetify Blueprints
• 🦾 Type Strong: written in TypeScript

📦 Install

Requires Vite, will not work with Webpack

vuetify is a peer dependency (Vuetify 3 or 4) — install it alongside the module:

npm install -D vuetify
npx nuxt module add vuetify-nuxt-module

🦄 Usage

vuetify-nuxt-module is strongly opinionated and has a built-in default configuration out of the box. You can use it without any configuration, and it will work for most use cases.

Add vuetify-nuxt-module module to nuxt.config.ts and configure it:

// Nuxt config file
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: [
    'vuetify-nuxt-module'
  ],
  vuetify: {
    moduleOptions: {
      /* module specific options */
    },
    vuetifyOptions: {
      /* vuetify options */
    }
  }
})

Read the 📖 documentation for a complete guide on how to configure and use this module.

👀 Full config

Check out the types.

The virtual modules can be found in configuration.d.ts file.

📄 License

MIT License © 2023-PRESENT Vuetify, LLC