5

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>
Vickel
  • 7,879
  • 6
  • 35
  • 56
paupaulaz
  • 937
  • 1
  • 11
  • 20
  • 1
    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 Dec 25 '19 at 22:31
  • 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 Dec 25 '19 at 22:34
  • 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: https://stackoverflow.com/questions/52310060/how-to-override-vuetify-styles – Arc Dec 25 '19 at 22:38
  • If you want to override the Vuetify core styles, there is information here, but I highly recommend not doing so for this case. https://stackoverflow.com/questions/53675683/unable-to-override-styles-in-vuetify – Arc Dec 25 '19 at 22:39
  • I'll dig into that, thanks ! – paupaulaz Dec 25 '19 at 22:41

3 Answers3

4

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

PWie
  • 53
  • 7
Be Kind
  • 4,712
  • 1
  • 38
  • 45
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.

Michael Mudge
  • 369
  • 1
  • 5
  • 10
0

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.

Tjevill
  • 1
  • 2