Vuetify: Nuxt link via route-link mixin broken - causes full page refresh

Created on 3 Jul 2017  路  6Comments  路  Source: vuetifyjs/vuetify

Repro:
https://github.com/ChavaSobreyra/vuetify-nuxt-link-repro

Instructions to reproduce:
Navigate to /users. In the nav-drawer I've set up normal nuxt-links and vuetify tile nuxt links.

Clicking vuetify links results in full page refresh to get to new page.

*Vuetify Version: *

    "vuetify": "^0.12.7"

*Relevant code for quick reference: *

// /layouts/app.vue

<v-navigation-drawer hide-overlay v-model="drawer" light clipped persistent disable-route-watcher>
  <v-list dense>
    <nuxt-link to="/users">
      Normal nuxt-link to /users
    </nuxt-link>
    <br>
    <br>
    <nuxt-link to="/users/add">
      Normal nuxt-link to /users/add
    </nuxt-link>

    <v-list-item>
      <v-list-tile href="/users" nuxt ripple>
        <v-list-tile-action>
          <mdi icon="account"></mdi>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>
            Users
          </v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list-item>

    <v-list-item>
      <v-list-tile href="/users/add" nuxt ripple>
        <v-list-tile-action>
          <mdi icon="account"></mdi>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>
            Users Add
          </v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list-item>

  </v-list>
</v-navigation-drawer>
enhancement

Most helpful comment

I agree, will fix.

All 6 comments

Ok I found the problem:
Using the nuxt option also requires using the router option because the nuxt-link logic is nested under if (options && this.router) { in the route-link.js mixin.

Since using the nuxt option automatically implies that it is a router link, I think it would probably make more sense to do something like if (options && (this.router || this.nuxt)) {

I agree, will fix.

This has been added, the router prop will be deprecated in 0.14.

Hi is there an example of how this should actually be used?

I'm currently using:
<v-list-tile :href="item.route" nuxt>

@ImTheDeveloper <v-list-tile nuxt :to="item.route">

to is for router links.

Since this issue is closed be sure to open a new issue if you continue to have problems

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord

Was this page helpful?
0 / 5 - 0 ratings