nuxt: Can't use is="NuxtLink" with component

Or, to reuse the existing NuxtLink component:

const component = computed(() => {
  if (props.to || props.href) return resolveComponent('NuxtLink')
  return 'button'
})

Example: https://stackblitz.com/edit/github-vwzpk9?file=app.vue.

The reason this is required is that if you don’t use NuxtLink it won’t be included in your bundle. So we need more than just a string to tell us.

If you want it globally registered then you can create your own NuxtLink component with defineNuxtLink in your components directory and set components.global to true in your nuxt.config. See https://github.com/nuxt/framework/pull/3305 for some context.

First you can use nuxt-link for external links now. Check the doc: https://v3.nuxtjs.org/docs/usage/nuxt-link.

If you still need to use it in is prop, you can use defineNuxtLink({}) instead of nuxt-link:

const component = computed(() => {
  if (props.to || props.href) return defineNuxtLink({})
  return 'button'
})

For those wondering, the correct import is import { NuxtLink } from '#components'; Then you can use: <component :is="to ? NuxtLink : 'div'" :to="to">, Nuxt need better documentation about the Virtual Files, they are helpful, but confusing.

Sometimes life is like a joke, I’ve created a reproduction repo and… it works just fine 😃 Tried again in the project, and it works too… So, thanks again 👍

@deflexor it will work if you use a script setup block, where the import is automatically exposed. Otherwise you need to pass it explicitly to the template.

@Dodje It’s because NuxtLink isn’t globally registered - it’s auto-imported. Within a Nuxt project we detect resolveComponent('NuxtLink') and rewrite this into an import statement.

You can probably resolve this in your case by adding your ui library to build.transpile, and using import { NuxtLink } from '#imports'…