Repository files navigation

Zero-config Nuxt Module for Vuetify

• 📖Documentation & guides
• 👌Zero-Config: sensible built-in defaultVuetify configuration for common use cases
• 🔌Extensible: expose the ability to customize the Vuetify configuration viaNuxt Runtime Hooks
• ⚡Fully Tree Shakable: by default, only the needed Vuetify components are imported
• 🛠️Versatile: custom Vuetifydirectives andlabs components registration
• ✨Configurable Styles: configure your variables usingVuetify SASS Variables
• 💥SSR: automatic SSR detection and configuration includingHTTP Client hints
• 🔩Nuxt Layers and Module Hooks: load your Vuetify configuration usingNuxt Layers or using a custom module viavuetify:registerModuleNuxt Module Hook
• 📥Vuetify Configuration File: configure your Vuetify options using a customvuetify.config file, no dev server restart needed
• 🔥Pure CSS Icons: no more font/js icons, use the newunocss-mdi icon set or build your own with UnoCSS Preset Icons
• 😃Icon Fonts: configure theicon 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: registermultiple icon sets
• 🌍I18n Ready: install@nuxtjs/i18n Nuxt module, and you're ready to use Vuetifyinternationalization features
• 📆Date Components: use Vuetify componentsthat require date functionality installing and configuring one of the@date-io adapters
• 💬Auto-Import Vuetify Locale Messages: addVuetify 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: useVuetify Blueprints to quickly scaffold components
• 👀Nuxt DevTools: ready to inspect your Vuetify styles with theNuxt DevTools inspector
• 🦾Type Strong: written inTypeScript

Requires Vite, will not work with Webpack

npx nuxi@latest module add vuetify-nuxt-module

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.

Addvuetify-nuxt-module module tonuxt.config.ts and configure it:

// Nuxt config fileimport{defineNuxtConfig}from'nuxt/config'exportdefaultdefineNuxtConfig({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.

Check out thetypes.

The virtual modules can be found inconfiguration.d.ts file.

MIT License © 2023-PRESENTJoaquín Sánchez