fix(nuxt): prevent fallthrough attributes on custom NuxtLink

[lihbr]

🔗 Linked issue

Resolves: #19375

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

In #19309 we enabled the forwarding of the rel prop of NuxtLink as an attribute to internal links.

This resurfaced an issue we faced in the past (#14897) where the custom API of NuxtLink (from RouterLink) cannot handle such fallthrough attributes¹. This seems to happen because Vue slot API cannot assume that the slot content strictly is a VNode (as it could also be a fragment or text node), so it has to consider all cases.²

I think this is not really an upstream issue (vue-router actually tries to let those attribute fallthrough as it's Vue default behavior, causing the warning) but a limitation of the slot API (again, it cannot just assume it will be a VNode).

Given those considerations we (mainly) have two choices:

1. Forcing users to forward fallthrough attributes manually using v-bind="$attrs" systematically when using the custom API
2. Not forwarding any additional attribute to the component when the custom API is used

I think n°2 makes more sense. Should someone use the custom API, it makes more sense for them to just apply those extra attributes on their slot content themselves rather than providing them to the link component which might eventually apply them to their slotted template. This comes with the tradeoff of not being able to programmatically define attributes to be applied on our end (like the prefetching class)³

---

This PR also refactors the way RouterLink props are defined to be more readable (otherwise we would have multiple inline ternaries when defining the object).

The type of routerLinkProps is Record<string, any>, defined after Vue's internal RawProps type which is not exported by Vue (with reasons I assume)

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

Footnotes

1. Vue documentation on fallthrough attributes behavior: https://vuejs.org/guide/components/attrs.html ↩

2. For reference, this also happens with RouterLink directly: https://stackblitz.com/edit/github-stiici-ukvew6 ↩

3. vue-router seems to be doing the same tradeoff, albeit booleans used to define active classes and such are exposed to the slot: https://github.com/vuejs/router/blob/6b7b25a74e89f1dde534bf86d19cfcdbce25092b/packages/router/src/RouterLink.ts#L214-L230 ↩

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[manniL]

I agree, option 2 seems the most reasonable here giving the user full control

[nathanchase]

The workaround of adding v-bind="$attrs" mentioned here is the only thing currently preventing the Extraneous non-props attributes (rel) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. errors in Nuxt 3.2.3.

[manniL]

@nathanchase This should be resolved on the edge channel