nuxt-vuetify

Go to documentation

Add Vuetify 3 to your Nuxt 3 application in seconds.

1 maintainer

6k installs

41 stars

Nuxt Vuetify

Add Vuetify 3 to your Nuxt application in seconds.

✨ Release Notes

Features

👌 Zero configuration to start
🌳 Treeshaking built-in (vite, disabled by default)
⚡️ Icon fonts loaded via CDN (enabled by default, mdi)
📊 Automatic Nuxt SSR detection
⚙️ Vuetify styles configurable (precompiled css by default)

Features not yet supported

Vuetify labs with treeshaking
Material Design Blueprints
Icon fonts

Quick Setup

Add @invictus.codes/nuxt-vuetify dependency to your project

# Using pnpm
pnpm add -D @invictus.codes/nuxt-vuetify

# Using yarn
yarn add --dev @invictus.codes/nuxt-vuetify

# Using npm
npm install --save-dev @invictus.codes/nuxt-vuetify

Add @invictus.codes/nuxt-vuetify to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@invictus.codes/nuxt-vuetify'
  ],
  vuetify: {
    /* vuetify options */
    vuetifyOptions: {
      // @TODO: list all vuetify options
    },

    moduleOptions: {
      /* nuxt-vuetify module options */
      treeshaking: true | false,
      useIconCDN: true | false,

      /* vite-plugin-vuetify options */
      styles: true | 'none' | 'expose' | 'sass' | { configFile: string },
      autoImport: true | false,
      useVuetifyLabs: true | false, 
    }
  }
})

That's it! You can now use Nuxt Vuetify in your Nuxt app ✨

Nuxt-Vuetify options

Scope	Property name	Accepted values	Description	Default	Origin
moduleOptions	treeshaking	true, false	Treeshaking enables you to drastically lower your build size by only including the components you actually use in the final bundle	false	Module
moduleOptions	useIconCDN	true, false	Use a CDN to load the icons (only available for defaultSet 'mdi', 'md' and 'fa')	true	Module
moduleOptions	styles	true, 'none', 'expose', 'sass', { configFile: string } Also refer to Vuetify documentation	- true: precompiled vuetify css - none: no styles are loaded - sass: sass styles are used - expose: sass styles are used - { configFile: '<your sass/scss-file here>' }: use your own styles file	true	Vuetify sass variables vite-plugin-vuetify
moduleOptions	autoImport	true, false	Auto imports the Vuetify components (only available with treeshaking)	true	Nuxt 3 auto imports vite-plugin-vuetify
moduleOptions	useVuetifyLabs	true, false (does not work with treeshaking)	Auto imports the Vuetify components (only available with treeshaking)	true	Nuxt 3 auto imports vite-plugin-vuetify
vuetifyOptions	icons	Refer to Vuetify documentation			Vuetify icon fonts

Development

Make sure to be logged in with gh auth login, otherwise changelogen won't work.

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release

License

MIT License