Awesome
<div align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://github.com/vuetifyjs/nuxt-module/raw/main/hero-dark.svg" /> <img alt="vuetify-nuxt-module - Zero-config Nuxt Module for Vuetify" src='https://github.com/vuetifyjs/nuxt-module/raw/main/hero.svg' alt="vuetify-nuxt-module - Zero-config Nuxt Module for Vuetify"><br> </picture> <p>Zero-config Nuxt Module for Vuetify</p> </div> <p align='center'> <a href='https://www.npmjs.com/package/vuetify-nuxt-module' target="__blank"> <img src='https://img.shields.io/npm/v/vuetify-nuxt-module?color=33A6B8&label=' alt="NPM version"> </a> <a href="https://www.npmjs.com/package/vuetify-nuxt-module" target="__blank"> <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/vuetify-nuxt-module?color=476582&label="> </a> <a href="https://nuxt.vuetifyjs.com/" target="__blank"> <img src="https://img.shields.io/static/v1?label=&message=docs%20%26%20guides&color=2e859c" alt="Docs & Guides"> </a> <br> <a href="https://github.com/vuetifyjs/nuxt-module" target="__blank"> <img alt="GitHub stars" src="https://img.shields.io/github/stars/userquin/vuetify-nuxt-module?style=social"> </a> </p> <br>π 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
π¦ 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