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

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>
vue.jsvuetify.jsvue-routerv-btn


Solution 1:[1]

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>
  1. 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

Solution 2:[2]

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.

Solution 3:[3]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 PWie
Solution 2 Michael Mudge
Solution 3 Tjevill

Related Questions