Nuxt Vuetify Button always hovered

2
votes

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.

1
nuxt.jsvuetify.js
I really don't get the issue here (especially why you're talking about the far right button). Is it because you do have your button hovered when you do not want it to ? Did you tried to add a exact prop on v-btn ? - kissu
I edited my post to be a little more clear about the issue. I hope it's now understandable.. I tried the exact property (thanks for mentioning it), but it doesn't change the hover-issue - Linsane

1 Answers

2
votes

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.