Open oemer-aran opened 1 year ago
@johnleider plans for this?
Was hoping for a community contribution since none of the team uses nuxt.
Nuxt would have to expose a vue-router compatible useLink function on the component.
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?
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.
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.
@KaelWD This has been done on Nuxt side: https://github.com/nuxt/nuxt/issues/22169, do you know when this might be expedited?
@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.
Problem to solve
In Vuetify2 adding the
nuxt
to a routable component (e.g.v-btn
orv-card
) produced anuxt-link
ifto
prop orhref
prop was passed. In Vuetify 3 thenuxt
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 />
(Nohref
orto
)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 />
(Nohref
orto
)NOTE:
nuxt-link
can now handle internal (to
) and external (href
) links: https://nuxt.com/docs/api/components/nuxt-link