CODEWITHSUNDEEP
vue.jsvuejs2nuxt.jsvuetify.js
Linsane
Linsane

Reputation: 358

Nuxt Vuetify Button always hovered

I'm using NuxtJs in its latest release with Vuetify.

In my Nav-Bar there is a Home-Button which leads to the main page, this is the code for it:

<v-app-bar fixed app>
  <v-toolbar-title v-text="title" />
  <v-btn nuxt icon to="/">
    <v-icon :dark="isDarkTheme"> mdi-home </v-icon>
  </v-btn>
</v-app-bar>

As long as I am on the main-page the icon appears hovered: enter image description here

As soon as I leave this page for any other page it looks like this: enter image description here

The Logout-Button on the far right is swapped with a Log-In-Button as soon as you're logged out. While I am on the login-page, the Login-Button also appears hovered as it leads to /login..

enter image description here

<!-- Login -->
<v-btn v-if="!$auth.loggedIn" icon nuxt to="/login">
  <v-icon>mdi-login</v-icon>
</v-btn>

Has anyone ever encountered a problem like this?

Edit: To be a little more clear about my issue. These buttons appear constantly hovered, unaffected from what I am doing on the page, as long as I am on the page they are leading to when clicked.

Upvotes: 2

Views: 545

Answers (1)

kissu
kissu

Reputation: 46769

By reading the official documentation, it looks like there is a nuxt prop that you can pass to the v-btn component. One which transforms the button into a link I guess.

Then, the default behavior of Nuxt will be applied:

  • adding a nuxt-link-active class if it matches the path
  • adding a nuxt-link-exact-active if it matches the path exactly

More info can be found here:

As for an answer, you should either remove the nuxt prop from your button and add a @click that will do the same job as the link, or better: write a link and style it to your liking. Because as of right now, I guess that this class is creating the hover state.

Upvotes: 2

Related Questions