Dynamically creating <NuxtLink> with <Component> no longer works

Environment

• Operating System: Darwin
• Node Version: v14.17.6
• Nuxt Version: 3.0.0-27454426.4cefce4
• Package Manager: npm@8.5.4
• Bundler: Vite
• User Config: meta, publicRuntimeConfig
• Runtime Modules: -
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-92nabt?file=app.vue

Describe the bug

Code like this used to work, but no longer does:

<Component :is="1 === 1 ? 'NuxtLink' : 'a'" to="/example">
  This should be a link to the "Example" page
</Component>

Additional context

Two others with the same problem:

https://discord.com/channels/473401852243869706/897487139888062506/953235583403196476

https://discord.com/channels/473401852243869706/897487139888062506/953281246472056882

Logs

No response

[danielroe]

The new way to pull in a component that is not globally registered is to use resolveComponent.

See docs and this comment.

Example with NuxtLink.

[jerryjappinen]

Also ran into this. I very often have components that might or might not render a link, just like @przyb mentioned there. I might have a button component that does something like this:

  computed: {
    is () {
      if (this.to) {
        return 'NuxtLink'
      } else if (this.href || this.mailto || this.tel) {
        return 'a'
      }

      return 'button'
    }
  }

Mostly I do this so that I don’t have to duplicate or spread other relevant button logic/styling between multiple components.

Another reason I might do something like this, is that part of the data might still be loading. I might know that I want to render a list of objects, but e.g. a component of the URL necessary to render the link is not available yet. Maybe client is still waiting for the rest of the data to load, or the data is only available after hydration but not server-side.