My project: Vue 3 w/ the Composition API, Typescript, and Vuetify.

I'm trying to set the background of a v-navigation-drawer control to a gradient, but whenever I set a custom class on the control, nothing changes.

This is an example of the class:

// main.css
.gradientBackground {
  color: linear-gradient(to bottom right, white, black);
}

Here is the navigation drawer:

// .vue file
<template>
  <div>
    <v-layout>
      <v-navigation-drawer
        expand-on-hover
        rail
        rail-width="72"
        class="gradientBackground "
      >
      ... bunch of stuff
      </v-navigation-drawer> 
    </v-layout>
  </div>
</template>

<script lang="ts" setup>

import '@/assets/main.css'

</script>

I've tried using a scoped style within the same file without any luck. I've only been able to directly change the color with a standard 6-digit hex value or by using the theme colors (primary, secondar, etc.) which are really just 6-digit hex values.

I've seen themes for purchase on Vuetify's store that has includes gradients, so I know it is possible. I'm just not sure how to implement it.

My project: Vue 3 w/ the Composition API, Typescript, and Vuetify.

I'm trying to set the background of a v-navigation-drawer control to a gradient, but whenever I set a custom class on the control, nothing changes.

This is an example of the class:

// main.css
.gradientBackground {
  color: linear-gradient(to bottom right, white, black);
}

Here is the navigation drawer:

// .vue file
<template>
  <div>
    <v-layout>
      <v-navigation-drawer
        expand-on-hover
        rail
        rail-width="72"
        class="gradientBackground "
      >
      ... bunch of stuff
      </v-navigation-drawer> 
    </v-layout>
  </div>
</template>

<script lang="ts" setup>

import '@/assets/main.css'

</script>

I've tried using a scoped style within the same file without any luck. I've only been able to directly change the color with a standard 6-digit hex value or by using the theme colors (primary, secondar, etc.) which are really just 6-digit hex values.

I've seen themes for purchase on Vuetify's store that has includes gradients, so I know it is possible. I'm just not sure how to implement it.

• typescript
• vue.js
• vuetify.js

1 Answer 1

The solution was to set the background-image property and include !important

so the end result would be:

.gradientBackground {
  background-image: linear-gradient(to bottom right, white, black) !important;
}