Warning will appear when passing an external link to `<NuxtLink>`

[Alex Liu]

Environment

---

• Operating System: Linux
• Node Version: v18.20.3
• Nuxt Version: 3.12.0-28606556.69430aa2
• CLI Version: 3.11.2-1716385490.bfaf128
• Nitro Version: 2.9.6
• Package Manager: pnpm@8.15.6
• Builder: -
• User Config: devtools
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/nuxt-starter-jphpju?file=app.vue

Describe the bug

1. Start Reproduction. It includes the following code:

   <NuxtLink to="https://nuxt.com/">Nuxt</NuxtLink>

2. Open the Console panel in DevTools.
3. A warning appears: [Vue Router warn]: No match found for location with path "https://nuxt.com/".

Additional context

This might be related to this PR: #26522.

Logs

N/A

[StackBlitz]

Start a new pull request in StackBlitz Codeflow.

• nuxt-starter-jphpju (Open reproduction)

[Alex Liu]

I've tested various scenarios regarding this PR #26522 and noticed that the useLink from this PR behaves slightly differently from Vue Router's useLink. For example:

<script setup lang="ts">
import { useLink } from 'vue-router'

const props = shallowReactive({
  to: 'https://mini-ghost.dev',
})

const { isActive } = useLink(props)
const { isActive: isNuxtLinkActive } = resolveComponent('NuxtLink').useLink(props)

const onClick = () => {
  if (props.to === '/') {
    props.to = '/about'
  } else {
    props.to = '/'
  }
}
</script>

<template>
  <div>
    <button @click="onClick">
      Click
    </button>

    isActive {{ isActive }} <br>
    isNuxtLinkActive: {{ isNuxtLinkActive }}
  </div>
</template>

When we switch routes by clicking the <button>, Vue Router's isActive reacts to the changes, but <NuxtLink>'s isNuxtLinkActive does not respond to changes in data. This issue might be caused by the following code segment:

nuxt/packages/nuxt/src/app/components/nuxt-link.ts

Lines 148 to 151 in 2efaa26

 const link = useBuiltinLink?.({ 
   ...props, 
   to: to.value, 
 }) 

Here, we are destructuring the passed props, which if reactive or shallowReactive, would lose their reactivity.

Should we align <NuxtLink>'s useLink behavior with Vue Router's useLink?

[Daniel Roe]

Nice find! Yes, we should ensure this remains reactive.