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

3
votes

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>
2
vue.jsvuetify.jsvue-routerv-btn
You can't remove the default styling without doing global overrides for buttons. But if you just want to add some additional overriding styling, you can use !important, increase specificity, or removed the "scoped" from this file to override. - Arc
Thank you for your answer. Since I would like to do this for all my router btns, could you please tell me the right way to do this global overwrite? I tried digging in that direction but could not find a solution either. - paupaulaz
The easiest way without modifying the Vuetify core styling itself would be to go to your parent component and apply the styles there. Find more info here: stackoverflow.com/questions/52310060/… - Arc
If you want to override the Vuetify core styles, there is information here, but I highly recommend not doing so for this case. stackoverflow.com/questions/53675683/… - Arc
I'll dig into that, thanks ! - paupaulaz

2 Answers

1
votes

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;
}
0
votes

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.