diff --git a/examples/nuxt-link/pages/index.vue b/examples/nuxt-link/pages/index.vue
index b432aa7166..f12ad59916 100644
--- a/examples/nuxt-link/pages/index.vue
+++ b/examples/nuxt-link/pages/index.vue
@@ -21,5 +21,6 @@
Index page with a custom link component with a custom active class
+ Link without href and to
diff --git a/packages/nuxt3/src/app/components/nuxt-link.ts b/packages/nuxt3/src/app/components/nuxt-link.ts
index e5ea01958c..1407289285 100644
--- a/packages/nuxt3/src/app/components/nuxt-link.ts
+++ b/packages/nuxt3/src/app/components/nuxt-link.ts
@@ -141,8 +141,7 @@ export function defineNuxtLink (options: NuxtLinkOptions) {
return false
}
- // Directly check if `to` is an external URL by checking protocol
- return hasProtocol(to.value, true)
+ return to.value === '' || hasProtocol(to.value, true)
})
return () => {
@@ -171,10 +170,10 @@ export function defineNuxtLink (options: NuxtLinkOptions) {
// Resolves `rel`
checkPropConflicts(props, 'noRel', 'rel')
- const rel = props.noRel
+ const rel = (props.noRel)
? null
// converts `""` to `null` to prevent the attribute from being added as empty (`rel=""`)
- : firstNonUndefined(props.rel, options.externalRelAttribute, DEFAULT_EXTERNAL_REL_ATTRIBUTE) || null
+ : firstNonUndefined(props.rel, options.externalRelAttribute, href ? DEFAULT_EXTERNAL_REL_ATTRIBUTE : '') || null
return h('a', { href, rel, target }, slots.default())
}
diff --git a/packages/nuxt3/test/nuxt-link.test.ts b/packages/nuxt3/test/nuxt-link.test.ts
index ee12dc3cf3..5138dea898 100644
--- a/packages/nuxt3/test/nuxt-link.test.ts
+++ b/packages/nuxt3/test/nuxt-link.test.ts
@@ -53,8 +53,10 @@ describe('nuxt-link:to', () => {
consoleWarnSpy.mockRestore()
})
- it('defaults to `null`', () => {
- expect(nuxtLink().props.href).toBe(null)
+ it('without to and href', () => {
+ const link = nuxtLink()
+ expect(link.props.href).toBe(null)
+ expect(link.props.rel).toBe(null)
})
})