/nuxt-vuetify

Add Vuetify 3 to your Nuxt application in seconds.

Primary LanguageTypeScriptMIT LicenseMIT

Nuxt Vuetify

No Longer Maintained.

Please refer to the official installation instructions provided by Vuetify using Nuxt or an alternative Nuxt Module.

https://vuetifyjs.com/en/getting-started/installation/#using-nuxt-3


npm version npm downloads License

Add Vuetify 3 to your Nuxt application in seconds.

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

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
  1. 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 Auto imports the labs Vuetify components (does not work 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

Copyright (c) Invictus.codes