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

[oemer-aran]

Problem to solve

In Vuetify2 adding the nuxt to a routable component (e.g. v-btn or v-card) produced a nuxt-link if to prop or href prop was passed. In Vuetify 3 the nuxt prop does no longer exist.

Proposed solution

Without nuxt prop: <v-btn href="https://vuetifyjs.com"/> => <a href="https://vuetifyjs.com"/> <v-btn to="/vuetify"/> => <router-link to="/vuetify"/> <v-btn /> => <button /> (No href or to)

With nuxt prop: <v-btn nuxt href="https://vuetifyjs.com"/> => <nuxt-link href="https://vuetifyjs.com"/> <v-btn nuxt to="/vuetify"/> => <nuxt-link to="/vuetify"/> <v-btn nuxt /> => <button /> (No href or to)

NOTE: nuxt-link can now handle internal (to) and external (href) links: https://nuxt.com/docs/api/components/nuxt-link

[lioneaglesolutions]

@johnleider plans for this?

[johnleider]

Was hoping for a community contribution since none of the team uses nuxt.

[KaelWD]

Nuxt would have to expose a vue-router compatible useLink function on the component.

[so1ve]

Hi 👋 @KaelWD, I have raised an issue in nuxt repo: nuxt/nuxt#22169. Will vuetify team implement this feature once useLink function is added to NuxtLink? If not, how to implement this feature?

[LittleSheep2Code]

I noticed the button and others components use render function like way to render, we can use custom tag property to implement this feature, but will get a typescript error because the tag property doesn't accept vue component type.

https://github.com/vuetifyjs/vuetify/blob/a997c424f8660894555804bfcb88761cfead9238/packages/vuetify/src/components/VBtn/VBtn.tsx#L157C1-L168C54

The code will like this:

<v-btn :tag="RouterLink" to="/">Link</v-btn>

I didn't find way to directly use the NuxtLink component in code, so I made a wrapper of NuxtLink. That is the RouterLink referenced in previous code.

<template>
  <nuxt-link v-bind="props" />
</template>

<script setup lang="ts">
// Add other properties if you want
const props = defineProps<{ to: string; target: string }>();
</script>

I tested this solution, looks everything works fine. Except the warning.

[AnttechDev]

@KaelWD This has been done on Nuxt side: https://github.com/nuxt/nuxt/issues/22169, do you know when this might be expedited?

[KaelWD]

https://github.com/vuetifyjs/vuetify/pull/19514#issuecomment-2065784246

[alihardan]

#19514 (comment)

@KaelWD, I agree with you. If it doesn't bring prefetching, it has almost no advantage. Maybe we should hope that prefetch will be added to useLink later.