Skip to content

feat(router): add NuxtLink support for useLink#19514

Draft
userquin wants to merge 1 commit intomasterfrom
userquin/feat-add-nuxt-use-link-support
Draft

feat(router): add NuxtLink support for useLink#19514
userquin wants to merge 1 commit intomasterfrom
userquin/feat-add-nuxt-use-link-support

Conversation

@userquin
Copy link
Copy Markdown
Member

Description

This PR allows use useLink with NuxtLink, this Nuxt PR should be merged nuxt/nuxt#26522

This will work only when:

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
Copy link
Copy Markdown
Member Author

userquin commented Mar 29, 2024

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>

@KaelWD
Copy link
Copy Markdown
Member

KaelWD commented Mar 30, 2024

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

@userquin
Copy link
Copy Markdown
Member Author

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 userquin marked this pull request as draft March 30, 2024 11:57
@userquin
Copy link
Copy Markdown
Member Author

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.

@KaelWD
Copy link
Copy Markdown
Member

KaelWD commented Apr 19, 2024

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.

@franz-bendezu
Copy link
Copy Markdown

Hey everyone! 👋

I was reviewing this PR and wanted to suggest an improvement to make it more flexible and configurable.

Currently, the PR directly resolves 'NuxtLink', which could cause issues if the component name is changed in the Nuxt config or if it's not globally registered. Instead, we could use Vue’s inject API to dynamically resolve the component name, making it more adaptable.

Proposed Approach:

Use inject to allow dynamic configuration, with 'RouterLink' as the default fallback:

const injectedRouterLinkName = inject<string>('vuetify-router-link', 'RouterLink')
const RouterLink = resolveDynamicComponent(injectedRouterLinkName) as typeof _RouterLink | string

This approach also enables Nuxt users to configure the component name via a plugin while keeping it flexible for other use cases:

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.provide('vuetify-router-link', 'NuxtLink') // Customizable component name
})

This would make the implementation more adaptable to different configurations and user preferences. 🚀

@johnleider johnleider added the S: stale This issue is untriaged and hasn't seen any activity in at least six months. label May 13, 2025
@KaelWD KaelWD force-pushed the master branch 4 times, most recently from 142b234 to bb54746 Compare September 12, 2025 09:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

E: router S: needs more information S: stale This issue is untriaged and hasn't seen any activity in at least six months. T: feature A new feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] Support nuxt prop for Vuetify 3 on Routable components

5 participants