TypeScript icon, indicating that this package has built-in type declarations

0.3.0 • Public • Published

Nuxt Vuetify

npm version npm downloads License

Add Vuetify 3 to your Nuxt application in seconds.


  • 👌  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: [
  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,
{ 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

moduleOptions autoImport true, false Auto imports the Vuetify components (only available with treeshaking) true Nuxt 3 auto imports

moduleOptions useVuetifyLabs true, false (does not work with treeshaking) Auto imports the Vuetify components (only available with treeshaking) true Nuxt 3 auto imports

vuetifyOptions icons Refer to Vuetify documentation Vuetify icon fonts


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


MIT License

Copyright (c) Invictus.codes




Package Sidebar


npm i @invictus.codes/nuxt-vuetify

Weekly Downloads






Unpacked Size

17.2 kB

Total Files


Last publish


  • jvhellemondt