What We'll Do

Vuetify has predefined styles using SASS variables.

For example, when using v-btn, the default height is set as:

$button-height: 36px;

In this guide, we will change this default variable to 40px.

Checking Alternatives Before Changing Variables

Vuetify provides many props to help with customization.

For instance, in the case of v-btn, you can modify its height using the height prop:

<v-btn height="100">Test</v-btn>

This means that changing SASS variables should be reserved for global layout adjustments.

Changing Component-Specific Variables

Install Required Packages

npm install -D vite-plugin-vuetify
npm install -D sass-embedded

Modify resources/js/app.js

// Add the following import
import "@mdi/font/css/materialdesignicons.css"
import "vuetify/styles"
import { createVuetify } from "vuetify"

// ~~~
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .use(vuetify) // ← Added this line
            .mount(el);

Modify vite.config.js

// Add to imports
import vuetify from "vite-plugin-vuetify"

// Add to plugins
export default defineConfig({
  plugins: [
    //~~
    vuetify({
      autoImport: true,
      styles: {
        configFile: "resources/scss/settings.scss",
      },
    }),
  ],
})

Create resources/scss/settings.scss

@use "vuetify/settings" with (
  $button-height: 40px
);

Build the Project

npm run dev

Now, the variable has been changed.

Conclusion

On the API page of Vuetify components, you can find an entry called SASS variables.

In this guide, we explored how to modify these variables using Laravel's Vite.

Hope this helps!