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

1. 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

2. 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 variablesvite-plugin-vuetify | | moduleOptions | autoImport | true, false | Auto imports the Vuetify components (only available with treeshaking) | true | Nuxt 3 auto importsvite-plugin-vuetify | | moduleOptions | useVuetifyLabs | true, false (does not work with treeshaking) | Auto imports the Vuetify components (only available with treeshaking) | true | Nuxt 3 auto importsvite-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

Copyright (c) Invictus.codes