nuxt-vuetify

Add Vuetify 3 to your Nuxt 3 application in seconds.

Nuxt Vuetify

npm versionnpm downloadsLicense

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)

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,
}
}
})

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

Nuxt-Vuetify options

ScopeProperty nameAccepted valuesDescriptionDefaultOrigin
moduleOptionstreeshakingtrue, falseTreeshaking enables you to drastically lower your build size by only including the components you actually use in the final bundlefalseModule
moduleOptionsuseIconCDNtrue, falseUse a CDN to load the icons (only available for defaultSet 'mdi', 'md' and 'fa')trueModule
moduleOptionsstylestrue,
'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
trueVuetify sass variables

vite-plugin-vuetify
moduleOptionsautoImporttrue, falseAuto imports the Vuetify components (only available with treeshaking)trueNuxt 3 auto imports

vite-plugin-vuetify
vuetifyOptionsiconsRefer to Vuetify documentationVuetify 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