Join the Nuxt Team at Frontend Nation 4-7 June.

vuetify-nuxt-module
vuetify-nuxt-module

Zero-config Nuxt Module for Vuetify.

vuetify-nuxt-module - Zero-config Nuxt Module for Vuetify

Zero-config Nuxt Module for Vuetify

NPM version NPM Downloads Docs & Guides
GitHub stars


πŸš€ Features

  • πŸ“– Documentation & guides
  • πŸ‘Œ Zero-Config: sensible built-in default Vuetify configuration for common use cases
  • πŸ”Œ Extensible: expose the ability to customize the Vuetify configuration via Nuxt Runtime Hooks
  • ⚑ Fully Tree Shakable: by default, only the needed Vuetify components are imported
  • πŸ› οΈ Versatile: custom Vuetify directives and labs components registration
  • ✨ Configurable Styles: configure your variables using Vuetify SASS Variables
  • πŸ’₯ SSR: automatic SSR detection and configuration including HTTP Client hints
  • πŸ”© Nuxt Layers and Module Hooks: load your Vuetify configuration using Nuxt Layers or using a custom module via vuetify:registerModule Nuxt Module Hook
  • πŸ“₯ Vuetify Configuration File: configure your Vuetify options using a custom vuetify.config file, no dev server restart needed
  • πŸ”₯ Pure CSS Icons: no more font/js icons, use the new unocss-mdi icon set or build your own with UnoCSS Preset Icons
  • πŸ˜ƒ Icon Fonts: configure the icon font you want to use, the module will automatically import it for you using CDN or local dependencies
  • 🎭 SVG Icons: ready to use @mdi/js and @fortawesome/vue-fontawesome SVG icons packs
  • πŸ“¦ Multiple Icon Sets: register multiple icon sets
  • 🌍 I18n Ready: install @nuxtjs/i18n Nuxt module, and you're ready to use Vuetify internationalization features
  • πŸ“† Date Components: use Vuetify components that require date functionality installing and configuring one of the @date-io adapters
  • πŸ’¬ Auto-Import Vuetify Locale Messages: add Vuetify Locale Messages adding just the locales you want to use, no more imports needed
  • βš™οΈ Auto-Import Vuetify Composables: you don't need to import Vuetify composables manually, they are automatically imported for you
  • 🎨 Vuetify Blueprints: use Vuetify Blueprints to quickly scaffold components
  • πŸ‘€ Nuxt DevTools: ready to inspect your Vuetify styles with the Nuxt DevTools inspector
  • 🦾 Type Strong: written in TypeScript

πŸ“¦ Install

Requires Vite, will not work with Webpack

npx nuxi@latest module add vuetify-nuxt-module

Open in StackBlitz

πŸ¦„ 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 JoaquΓ­n SΓ‘nchez