fix(Link): ensure single-root rendering for v-show and $el resolution (#6310)

Co-authored-by: Jakub Michálek <71264422+J-Michalek@users.noreply.github.com>

Author: benjamincanac

src/runtime/components/Link.vue

@@ -108,9 +108,10 @@ interface NuxtLinkDefaultSlotProps {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { isEqual } from 'ohash/utils'
-import { useForwardProps } from 'reka-ui'
+import { useForwardProps, Slot } from 'reka-ui'
 import { defu } from 'defu'
 import { reactiveOmit } from '@vueuse/core'
+import { hasProtocol } from 'ufo'
 import { useRoute, useAppConfig } from '#imports'
 import { mergeClasses } from '../utils'
 import { tv } from '../utils/tv'
@@ -146,11 +147,30 @@ const ui = computed(() => tv({
 
 const to = computed(() => props.to ?? props.href)
 
-function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
+const isInternalLink = computed(() => {
+  if (!to.value) return false
+  if (props.external) return false
+  if (typeof to.value !== 'string') return true
+  if (hasProtocol(to.value, { acceptRelative: true })) return false
+  if (props.target && props.target !== '_self') return false
+  return true
+})
+
+const externalRel = computed(() => {
+  if (props.noRel) return null
+  if (props.rel) return props.rel
+  return 'noopener noreferrer'
+})
+
+function isLinkActive({ route: linkRoute, isActive, isExactActive }: any = {}) {
   if (props.active !== undefined) {
     return props.active
   }
 
+  if (!to.value) {
+    return false
+  }
+
   if (props.exactQuery === 'partial') {
     if (!isPartiallyEqual(linkRoute.query, route.query)) return false
   } else if (props.exactQuery === true) {
@@ -172,7 +192,7 @@ function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
   return false
 }
 
-function resolveLinkClass({ route, isActive, isExactActive }: any) {
+function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
   const active = isLinkActive({ route, isActive, isExactActive })
 
   if (props.raw) {
@@ -184,8 +204,8 @@ function resolveLinkClass({ route, isActive, isExactActive }: any) {
 </script>
 
 <template>
-  <NuxtLink v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive, ...rest }" v-bind="nuxtLinkProps" :to="to" custom>
-    <template v-if="custom">
+  <NuxtLink v-if="isInternalLink" v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive, ...rest }" v-bind="nuxtLinkProps" :to="to" custom>
+    <Slot v-if="custom">
       <slot
         v-bind="{
           ...$attrs,
@@ -201,7 +221,7 @@ function resolveLinkClass({ route, isActive, isExactActive }: any) {
           active: isLinkActive({ route: linkRoute, isActive, isExactActive })
         }"
       />
-    </template>
+    </Slot>
     <ULinkBase
       v-else
       v-bind="{
@@ -221,4 +241,30 @@ function resolveLinkClass({ route, isActive, isExactActive }: any) {
       <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
     </ULinkBase>
   </NuxtLink>
+
+  <Slot v-else-if="custom">
+    <slot
+      v-bind="{
+        ...$attrs,
+        as,
+        type,
+        disabled,
+        ...(to ? { href: String(to), target: props.target, rel: externalRel, isExternal: true } : {}),
+        active: active ?? false
+      }"
+    />
+  </Slot>
+  <ULinkBase
+    v-else
+    v-bind="{
+      ...$attrs,
+      as,
+      type,
+      disabled,
+      ...(to ? { href: String(to), target: props.target, rel: externalRel, isExternal: true } : {})
+    }"
+    :class="resolveLinkClass()"
+  >
+    <slot :active="active ?? false" />
+  </ULinkBase>
 </template>

src/runtime/vue/overrides/inertia/Link.vue

@@ -71,7 +71,7 @@ export interface LinkSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { defu } from 'defu'
-import { useForwardProps } from 'reka-ui'
+import { useForwardProps, Slot } from 'reka-ui'
 import { reactiveOmit } from '@vueuse/core'
 import { usePage } from '@inertiajs/vue3'
 import { hasProtocol } from 'ufo'
@@ -179,7 +179,7 @@ const linkClass = computed(() => {
 </script>
 
 <template>
-  <template v-if="custom">
+  <Slot v-if="custom">
     <slot
       v-bind="{
         ...$attrs,
@@ -194,7 +194,7 @@ const linkClass = computed(() => {
         isExternal
       }"
     />
-  </template>
+  </Slot>
   <ULinkBase
     v-else
     v-bind="{

src/runtime/vue/overrides/none/Link.vue

@@ -73,6 +73,7 @@ export interface LinkSlots {
 <script setup lang="ts">
 import { computed, inject } from 'vue'
 import { defu } from 'defu'
+import { Slot } from 'reka-ui'
 import { hasProtocol } from 'ufo'
 import { useAppConfig } from '#imports'
 import { mergeClasses } from '../../../utils'
@@ -169,7 +170,7 @@ const navigate = handleNavigation
 </script>
 
 <template>
-  <template v-if="custom">
+  <Slot v-if="custom">
     <slot
       v-bind="{
         ...$attrs,
@@ -184,7 +185,7 @@ const navigate = handleNavigation
         active: isLinkActive
       }"
     />
-  </template>
+  </Slot>
   <ULinkBase
     v-else
     v-bind="{

src/runtime/vue/overrides/vue-router/Link.vue

@@ -65,7 +65,7 @@ export interface LinkSlots {
 import { computed } from 'vue'
 import { defu } from 'defu'
 import { isEqual } from 'ohash/utils'
-import { useForwardProps } from 'reka-ui'
+import { useForwardProps, Slot } from 'reka-ui'
 import { reactiveOmit } from '@vueuse/core'
 import { hasProtocol } from 'ufo'
 import { useRoute, RouterLink } from 'vue-router'
@@ -181,27 +181,9 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
 
 <!-- eslint-disable vue/no-template-shadow -->
 <template>
-  <template v-if="!isExternal && !!to">
-    <RouterLink v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }" v-bind="routerLinkProps" :to="to" custom>
-      <template v-if="custom">
-        <slot
-          v-bind="{
-            ...$attrs,
-            ...(exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {}),
-            as,
-            type,
-            disabled,
-            href,
-            navigate,
-            rel,
-            target,
-            isExternal,
-            active: isLinkActive({ route: linkRoute, isActive, isExactActive })
-          }"
-        />
-      </template>
-      <ULinkBase
-        v-else
+  <RouterLink v-if="!isExternal && !!to" v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }" v-bind="routerLinkProps" :to="to" custom>
+    <Slot v-if="custom">
+      <slot
         v-bind="{
           ...$attrs,
           ...(exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {}),
@@ -212,46 +194,60 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
           navigate,
           rel,
           target,
-          isExternal
-        }"
-        :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
-      >
-        <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
-      </ULinkBase>
-    </RouterLink>
-  </template>
-
-  <template v-else>
-    <template v-if="custom">
-      <slot
-        v-bind="{
-          ...$attrs,
-          as,
-          type,
-          disabled,
-          href: to,
-          rel,
-          target,
-          active: active ?? false,
-          isExternal
+          isExternal,
+          active: isLinkActive({ route: linkRoute, isActive, isExactActive })
         }"
       />
-    </template>
+    </Slot>
     <ULinkBase
       v-else
       v-bind="{
         ...$attrs,
+        ...(exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {}),
         as,
         type,
         disabled,
-        href: (to as string),
+        href,
+        navigate,
         rel,
         target,
         isExternal
       }"
-      :class="resolveLinkClass()"
+      :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
     >
-      <slot :active="active ?? false" />
+      <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
     </ULinkBase>
-  </template>
+  </RouterLink>
+
+  <Slot v-else-if="custom">
+    <slot
+      v-bind="{
+        ...$attrs,
+        as,
+        type,
+        disabled,
+        href: to,
+        rel,
+        target,
+        active: active ?? false,
+        isExternal
+      }"
+    />
+  </Slot>
+  <ULinkBase
+    v-else
+    v-bind="{
+      ...$attrs,
+      as,
+      type,
+      disabled,
+      href: (to as string),
+      rel,
+      target,
+      isExternal
+    }"
+    :class="resolveLinkClass()"
+  >
+    <slot :active="active ?? false" />
+  </ULinkBase>
 </template>

test/components/Link.spec.ts

@@ -17,6 +17,10 @@ describe('Link', () => {
     ['with raw activeClass', { props: { raw: true, active: true, activeClass: 'text-highlighted' } }],
     ['with raw inactiveClass', { props: { raw: true, active: false, inactiveClass: 'hover:text-primary' } }],
     ['with class', { props: { class: 'font-medium' } }],
+    ['with external to', { props: { to: 'https://example.com' } }],
+    ['with external to and target', { props: { to: 'https://example.com', target: '_blank' } }],
+    ['with internal to and target', { props: { to: '/about', target: '_blank' } }],
+    ['with external prop', { props: { to: '/api/download', external: true } }],
     // Slots
     ['with default slot', { slots: { default: () => 'Default slot' } }]
   ])

test/components/__snapshots__/Link-vue.spec.ts.snap

@@ -10,8 +10,16 @@ exports[`Link > renders with default slot correctly 1`] = `"<button type="button
 
 exports[`Link > renders with disabled correctly 1`] = `"<button type="button" disabled="" class="focus-visible:outline-primary text-muted cursor-not-allowed opacity-75"></button>"`;
 
+exports[`Link > renders with external prop correctly 1`] = `"<a href="/api/download" rel="noopener noreferrer" class="focus-visible:outline-primary text-muted hover:text-default transition-colors"></a>"`;
+
+exports[`Link > renders with external to and target correctly 1`] = `"<a href="https://example.com" rel="noopener noreferrer" target="_blank" class="focus-visible:outline-primary text-muted hover:text-default transition-colors"></a>"`;
+
+exports[`Link > renders with external to correctly 1`] = `"<a href="https://example.com" rel="noopener noreferrer" class="focus-visible:outline-primary text-muted hover:text-default transition-colors"></a>"`;
+
 exports[`Link > renders with inactiveClass correctly 1`] = `"<button type="button" class="focus-visible:outline-primary text-muted hover:text-default transition-colors"></button>"`;
 
+exports[`Link > renders with internal to and target correctly 1`] = `"<a href="/about" rel="noopener noreferrer" target="_blank" class="focus-visible:outline-primary text-muted hover:text-default transition-colors"></a>"`;
+
 exports[`Link > renders with raw activeClass correctly 1`] = `"<button type="button" class="text-highlighted"></button>"`;
 
 exports[`Link > renders with raw correctly 1`] = `"<button type="button" class=""></button>"`;

test/components/__snapshots__/Link.spec.ts.snap

@@ -10,8 +10,16 @@ exports[`Link > renders with default slot correctly 1`] = `"<button type="button
 
 exports[`Link > renders with disabled correctly 1`] = `"<button type="button" disabled="" class="focus-visible:outline-primary text-muted cursor-not-allowed opacity-75"></button>"`;
 
+exports[`Link > renders with external prop correctly 1`] = `"<a href="/api/download" rel="noopener noreferrer" class="focus-visible:outline-primary text-muted hover:text-default transition-colors"></a>"`;
+
+exports[`Link > renders with external to and target correctly 1`] = `"<a href="https://example.com" rel="noopener noreferrer" target="_blank" class="focus-visible:outline-primary text-muted hover:text-default transition-colors"></a>"`;
+
+exports[`Link > renders with external to correctly 1`] = `"<a href="https://example.com" rel="noopener noreferrer" class="focus-visible:outline-primary text-muted hover:text-default transition-colors"></a>"`;
+
 exports[`Link > renders with inactiveClass correctly 1`] = `"<button type="button" class="focus-visible:outline-primary text-muted hover:text-default transition-colors"></button>"`;
 
+exports[`Link > renders with internal to and target correctly 1`] = `"<a href="/about" rel="noopener noreferrer" target="_blank" class="focus-visible:outline-primary text-muted hover:text-default transition-colors"></a>"`;
+
 exports[`Link > renders with raw activeClass correctly 1`] = `"<button type="button" class="text-highlighted"></button>"`;
 
 exports[`Link > renders with raw correctly 1`] = `"<button type="button" class=""></button>"`;