Custom SASS variables

Vuetify allows the use of SASS variables to control the look and feel of your components. To get started follow these steps:

1. Create a settings.scss file

Create a new file named settings.scss in your ./assets directory. This file will contain all of your custom variables.

@use "vuetify/settings" with (
  $button-height: 40px,
  $button-color: green,
  $button-font-weight: 700
);

2. Set the configFile path

In your nuxt.config.ts file, under the vuxtify.treeShaking.styles property, set the configFile property to the path of your settings.scss file.

export default defineNuxtConfig({
  vuxtify: {
    treeShaking: {
      styles: {
        configFile: "./assets/settings.scss",
      },
    },
  },
});

3. Check your changes

If you used the same variables as the example in step 1, you should see a green button with a height of 40px and a font weight of 700.

<template>
  <v-btn>Green Button</v-btn>
</template>