vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

feat(router): add `NuxtLink` support for `useLink`

Open userquin opened this issue 1 year ago • 5 comments

Description

This PR allows use useLink with NuxtLink, this Nuxt PR should be merged https://github.com/nuxt/nuxt/pull/26522

This will work only when:

  • NuxtLink is registed globally: Nuxt will resolve it on demand, it is not registered globally, check https://github.com/nuxt/nuxt/issues/13659
  • NuxtLink is register with that name: Nuxt allows us to change the name

To register NuxtLink globally we can use a plugin:

import { NuxtLink } from '#components'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('NuxtLink', NuxtLink)
})

vuetify-nuxt-module will provide an option to register NuxtLink globally: will allow also to use other name (will register both).

resolves #17490

userquin avatar Mar 29 '24 20:03 userquin

Right now there is an alternative using custom and default slot props, but requires wrapping the component, for example:

<template>
  <NuxtLink to="/someroute" custom #="{ navigate }">
    <v-btn @click="navigate">Link</v-btn>
  </NuxtLink>
</template>

userquin avatar Mar 29 '24 20:03 userquin

Router-link is available in nuxt right? How does using this instead behave differently?

KaelWD avatar Mar 30 '24 07:03 KaelWD

Router-link is available in nuxt right? How does using this instead behave differently?

Both are there, this PR should be changed to allow render RouterLink and NuxtLink (v2 behavior): https://nuxt.com/docs/api/components/nuxt-link

The linked issue explains the behavior...

userquin avatar Mar 30 '24 11:03 userquin

Sorry for the confusion:

This PR was about adding NuxtLink:useLink support from Nuxt issue (the releated issue here was mentioned there, but it is not related): Nuxt issue is about adding useLink, Vuetify issue is about rendering RouterLink and/or NuxtLink.

userquin avatar Mar 30 '24 12:03 userquin

That doesn't really answer my question. NuxtLink supports internal and external links but we already have that with to/href. Afaict the only other difference is prefetching but you haven't implemented that in useLink.

KaelWD avatar Apr 19 '24 05:04 KaelWD