Home > Blockchain >  Vuetify components not linking properly in NuxtJS
Vuetify components not linking properly in NuxtJS

Time:04-17

I'm attempting to use the Vuetify v-list component in NuxtJS however when I deploy my app the list is not reactive at all (no hover effect, no linking).

The documentation for NuxtJS says all internal page links must use the <NuxtLink> component, but how is this possible when using pre-built components?

The NuxtLink component adds undesired styling. I'm assuming I'll need to hack away at the CSS to make it not do this?

<v-list>
    <v-list-item to="/some/endpoint">
       <!-- content -->
    </v-list-item>
</v-list>
  • Linking not working after being built
  • Component not reactive -- no hover effect (Assume because link is not registering).

CodePudding user response:

Using this should work

<v-list-item nuxt to="/some/endpoint">

As told in the documentation

Specifies the link is a nuxt-link. For use with the nuxt framework.

If you want to style the specific nuxt links, you can check this part of the documentation. Otherwise, the rest is probably Vuetify specific than can be overwritten with regular CSS.

  • Related