Common Setup

The styles option in moduleOptions allows you to configure how Vuetify styles are handled.

Configuration

You can configure the styles using the styles property in moduleOptions.

Basic Usage

By default, styles are enabled (true). To disable them, you can set styles to 'none'.

export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    moduleOptions: {
      styles: 'none'
    }
  }
})

Vuetify 4 Features

If you are using Vuetify 4, you can configure specific style features such as colors and utilities.

• colors: Enable/disable the standard colors palette. Default: true.
• utilities: Enable/disable the standard utilities. Default: true.

INFO

These options are only available for Vuetify 4. If you are using Vuetify 3, you should use the configFile option for customization.

export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    moduleOptions: {
      styles: {
        colors: false,
        utilities: false
      }
    }
  }
})

SASS Customization

If you wish to customize SASS variables (Vuetify 3+), you can provide a configFile path. This allows you to override global and component-level variables.

See SASS Customization for a detailed guide.

export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    moduleOptions: {
      styles: {
        configFile: 'assets/settings.scss'
      }
    }
  }
})

When using configFile, you can also enable Experimental Caching to improve build performance.