Search code examples
vue.jsvuejs2nuxt.jsvuetify.jshref

VuetifyJS `nuxt` property not working like `nuxt-link` in NuxtJS framework

So as per the VuetifyJS documentation here. A button can be turned into nuxt-link by adding nuxt property, something like below

<v-btn value="home" nuxt href="/home">Home</v-btn>

But the problem with this is, this gets rendered server side which is not how nuxt-link works. To verify this, if we use the original nuxt-link from NuxtJS framework

<nuxt-link to="/home">
  <v-btn value="home">
    Home
  </v-btn>
</nuxt-link>

this gets rendered on client side.

Not sure if this is a bug in VuetifyJS or on purpose. But either way it is not useable for creating nuxt-link on VuetifyJS components.

Did I understood this correctly or I am mistaken?

Solution

  • If you use nuxt prop in the v-btn component you should also use to prop instead of href :

    <v-btn value="home" nuxt to="/home">Home</v-btn>