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) }) })