How do I overwrite a v-btn active class in Vuetify?

Question

I am developing a website using Vue.js 2.6.10n with Vuetify 2.1.0 and vue-router 3.1.3.

I have a v-app-bar with v-btns to link to my different pseudo pages and want to have a custom class when the button is active, i.e that it links to the page being currently displayed. Using the active-classof the v-btn, I am able to add style "on top" of the Vuetify default, but not to overwrite it completely.

How can I totally get rid of the default active-class?

My objective is only to have the btn text underlined when it is active, and to get rid of that "button pressed" style which is the default.

Here is a sample of my code:

<template>
<v-btn
        to="/"
        active-class="active"
        text
        class=" white--text display-1 logo"
        >HOME</v-btn>
.
.
.
</template>
<style lang="scss" scoped>
.active {
  border-bottom: solid;
  border-color: yellow;
}
</style>

Answer 1

I got around the active-class matching the route by removing the to="/" prop on the v-btn and instead changing the @click event on the button to call a function and push to the route. Seems like the router no longer matches the to prop on the button and so it doesn't know to apply the active class.

html:

    <v-btn
        text
        color="primary"
        @click.stop="router.push({ name: 'myRouteName' })"
      >
</v-btn>

js:

  routeTo(routeName: string) {
    if (this.$router.currentRoute.name != routeName) {
      this.$router.push({ name: routeName })
    }
  }

note that I check the new routes name doesn't match the current routes name to avoid the duplicate navigation error.

Answer 2

For anyone stumbling over this I could not get active-class="no-active" working. What I did was :

<v-btn-toggle v-model="selectedButton">

And just set set the selectedButton: number | undefined = 10 (just a number out of the scope of number of buttons you got inside the v-btn-toggle.

After that I added the same v-model to the <v-btn> in the v-btn-toggle.

Added a watch to the selectedButton that set it to undefined everytime it changed. Did the trick for me.

Answer 3

To get rid of button pressed active state on vuetify components, found answer at this github issue:

1. Add no-active class to your component:

<v-btn active-class="no-active"></v-btn>

or

<v-chip :to="route" class="no-active">Home</v-chip>

2. Define styles (probably won't work if your SFC styles are scoped)

.v-btn--active.no-active::before {
  opacity: 0 !important;
}

If you want to keep hover highlight functionality - use this selector:

.v-btn--active.no-active:not(:hover)::before {
  opacity: 0 !important;
}

For scoped style - use deep selector