SASS Customization

Starting from version 0.17.0, this module configures Nuxt to use the SASS modern compiler (modern-compiler) by default.

For the best compatibility and performance, it is recommended to replace your sass dependency with sass-embedded.

Please check Build Performance in the Vuetify documentation for more details.

Overriding SASS Variables

Vuetify allows for overriding global and component-level SASS variables. When using this Nuxt module, the configuration differs slightly from the standard Vuetify documentation.

1. In your styles directory (for this example, we'll use ${srcDir}/assets/css), create two files: ${srcDir}/assets/css/globals.scss and ${srcDir}/assets/css/components.scss.

2. In the globals.scss file, add the following content:

globals.scss

@use 'vuetify' with (
    // Global Vuetify SASS variable overrides.  For example:
    // $utilities: false,
    // $reset: false,
    // $color-pack: false,
    // $body-font-family: sans-serif
)

3. In the components.scss file, add the following content:

components.scss

// $button-text-transform-override: capitalize;

@forward 'vuetify/settings' with (
    // Component Vuetify SASS variable overrides.  See https://vuetifyjs.com/en/features/sass-variables/#variable-api

    // For example -- overriding button font capitalization (as seen at the bottom of the v-btn guide here https://vuetifyjs.com/en/api/v-btn/):
    // $button-text-transform: $button-text-transform-override,
);

4. In your nuxt.config.ts, add a css entry to the defineNuxtConfig configuration object that points to globals.scss, as shown below:

nuxt.config.ts

export default defineNuxtConfig({
  css: ['@/assets/css/globals.scss']
  // other options
})

TIP

The css property within your defineNuxtConfig will import all styles from the file that you specify (in our case, globals.scss) into all components for convenience. Any styles appended to the globals.scss file in addition to the Vuetify Global Variables override will also be imported into all of your components. If you would like more fine-grained control, consider using a different file for your non-Vuetify global styles, like a separate main.scss that you import on a component-by-component basis.

You should now be able to override your global Vuetify SASS variables as well as your component-level Vuetify SASS variables. For a full list of variables, please check all of the imports in the index.