fix(Link): ensure consistency across Nuxt, Vue and Inertia

Resolves #5012

Author: benjamincanac

src/runtime/inertia/components/Link.vue

@@ -34,6 +34,10 @@ export interface LinkProps extends Partial<Omit<InertiaLinkProps, 'href' | 'onCl
    * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
    */
   rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null
+  /**
+   * If set to true, no rel attribute will be added to the link
+   */
+  noRel?: boolean
   /**
    * Value passed to the attribute `aria-current` when the link is exact active.
    *
@@ -72,32 +76,32 @@ import { usePage } from '@inertiajs/vue3'
 import { hasProtocol } from 'ufo'
 import { useAppConfig } from '#imports'
 import { tv } from '../../utils/tv'
+import { mergeClasses } from '../../utils'
 import ULinkBase from '../../components/LinkBase.vue'
 
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<LinkProps>(), {
   as: 'button',
   type: 'button',
-  active: undefined,
-  activeClass: '',
-  inactiveClass: ''
+  ariaCurrentValue: 'page',
+  active: undefined
 })
 defineSlots<LinkSlots>()
 
 const page = usePage()
 
 const appConfig = useAppConfig() as Link['AppConfig']
 
-const routerLinkProps = useForwardProps(reactiveOmit(props, 'as', 'type', 'disabled', 'active', 'exact', 'activeClass', 'inactiveClass', 'to', 'href', 'raw', 'custom', 'class'))
+const routerLinkProps = useForwardProps(reactiveOmit(props, 'as', 'type', 'disabled', 'active', 'exact', 'activeClass', 'inactiveClass', 'to', 'href', 'raw', 'custom', 'class', 'noRel'))
 
 const ui = computed(() => tv({
   extend: tv(theme),
   ...defu({
     variants: {
       active: {
-        true: props.activeClass,
-        false: props.inactiveClass
+        true: mergeClasses(appConfig.ui?.link?.variants?.active?.true, props.activeClass),
+        false: mergeClasses(appConfig.ui?.link?.variants?.active?.false, props.inactiveClass)
       }
     }
   }, appConfig.ui?.link || {})
@@ -121,6 +125,27 @@ const isExternal = computed(() => {
   return typeof href.value === 'string' && hasProtocol(href.value, { acceptRelative: true })
 })
 
+const hasTarget = computed(() => !!props.target && props.target !== '_self')
+
+const rel = computed(() => {
+  // If noRel is explicitly set, return null
+  if (props.noRel) {
+    return null
+  }
+
+  // If rel is explicitly set, use it
+  if (props.rel !== undefined) {
+    return props.rel || null
+  }
+
+  // Default to "noopener noreferrer" for external links or links with target
+  if (isExternal.value || hasTarget.value) {
+    return 'noopener noreferrer'
+  }
+
+  return null
+})
+
 const isLinkActive = computed(() => {
   if (props.active !== undefined) {
     return props.active
@@ -162,6 +187,8 @@ const linkClass = computed(() => {
         type,
         disabled,
         href,
+        rel,
+        target,
         active: isLinkActive,
         isExternal
       }"
@@ -176,6 +203,8 @@ const linkClass = computed(() => {
       type,
       disabled,
       href,
+      rel,
+      target,
       isExternal
     }"
     :class="linkClass"

src/runtime/inertia/components/LinkBase.vue

@@ -8,6 +8,7 @@ export interface LinkBaseProps {
   onClick?: ((e: MouseEvent) => void | Promise<void>) | Array<((e: MouseEvent) => void | Promise<void>)>
   href?: string
   target?: LinkProps['target']
+  rel?: LinkProps['rel']
   active?: boolean
   isExternal?: boolean
 }
@@ -44,7 +45,8 @@ function onClickWrapper(e: MouseEvent) {
     v-if="!!href && !isExternal && !disabled"
     :href="href"
     v-bind="{
-      target: target || (isExternal ? '_blank' : undefined),
+      rel,
+      target,
       ...$attrs
     }"
     @click="onClickWrapper"
@@ -59,7 +61,8 @@ function onClickWrapper(e: MouseEvent) {
       'aria-disabled': disabled ? 'true' : undefined,
       'role': disabled ? 'link' : undefined,
       'tabindex': disabled ? -1 : undefined,
-      'target': target || (isExternal ? '_blank' : undefined),
+      'rel': rel,
+      'target': target,
       ...$attrs
     } : as === 'button' ? {
       as,

src/runtime/vue/components/Link.vue

@@ -29,6 +29,10 @@ export interface LinkProps extends Partial<Omit<RouterLinkProps, 'custom'>>, /**
    * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
    */
   rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null
+  /**
+   * If set to true, no rel attribute will be added to the link
+   */
+  noRel?: boolean
   /**
    * The type of the button when not a link.
    * @defaultValue 'button'
@@ -66,6 +70,7 @@ import { hasProtocol } from 'ufo'
 import { useRoute, RouterLink } from 'vue-router'
 import { useAppConfig } from '#imports'
 import { tv } from '../../utils/tv'
+import { mergeClasses } from '../../utils'
 import { isPartiallyEqual } from '../../utils/link'
 import ULinkBase from '../../components/LinkBase.vue'
 
@@ -75,25 +80,23 @@ const props = withDefaults(defineProps<LinkProps>(), {
   as: 'button',
   type: 'button',
   ariaCurrentValue: 'page',
-  active: undefined,
-  activeClass: '',
-  inactiveClass: ''
+  active: undefined
 })
 defineSlots<LinkSlots>()
 
 const route = useRoute()
 
 const appConfig = useAppConfig() as Link['AppConfig']
 
-const routerLinkProps = useForwardProps(reactiveOmit(props, 'as', 'type', 'disabled', 'active', 'exact', 'exactQuery', 'exactHash', 'activeClass', 'inactiveClass', 'to', 'href', 'raw', 'custom', 'class'))
+const routerLinkProps = useForwardProps(reactiveOmit(props, 'as', 'type', 'disabled', 'active', 'exact', 'exactQuery', 'exactHash', 'activeClass', 'inactiveClass', 'to', 'href', 'raw', 'custom', 'class', 'noRel'))
 
 const ui = computed(() => tv({
   extend: tv(theme),
   ...defu({
     variants: {
       active: {
-        true: props.activeClass,
-        false: props.inactiveClass
+        true: mergeClasses(appConfig.ui?.link?.variants?.active?.true, props.activeClass),
+        false: mergeClasses(appConfig.ui?.link?.variants?.active?.false, props.inactiveClass)
       }
     }
   }, appConfig.ui?.link || {})
@@ -113,6 +116,27 @@ const isExternal = computed(() => {
   return typeof to.value === 'string' && hasProtocol(to.value, { acceptRelative: true })
 })
 
+const hasTarget = computed(() => !!props.target && props.target !== '_self')
+
+const rel = computed(() => {
+  // If noRel is explicitly set, return null
+  if (props.noRel) {
+    return null
+  }
+
+  // If rel is explicitly set, use it
+  if (props.rel !== undefined) {
+    return props.rel || null
+  }
+
+  // Default to "noopener noreferrer" for external links or links with target
+  if (isExternal.value || hasTarget.value) {
+    return 'noopener noreferrer'
+  }
+
+  return null
+})
+
 function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
   if (props.active !== undefined) {
     return props.active
@@ -168,6 +192,9 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
             disabled,
             href,
             navigate,
+            rel,
+            target,
+            isExternal,
             active: isLinkActive({ route: linkRoute, isActive, isExactActive })
           }"
         />
@@ -181,7 +208,10 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
           type,
           disabled,
           href,
-          navigate
+          navigate,
+          rel,
+          target,
+          isExternal
         }"
         :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
       >
@@ -199,7 +229,8 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
           type,
           disabled,
           href: to,
-          target: isExternal ? '_blank' : undefined,
+          rel,
+          target,
           active,
           isExternal
         }"
@@ -213,7 +244,8 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
         type,
         disabled,
         href: (to as string),
-        target: isExternal ? '_blank' : undefined,
+        rel,
+        target,
         isExternal
       }"
       :class="resolveLinkClass()"

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

@@ -185,7 +185,7 @@ exports[`Banner > renders with neutral color correctly 1`] = `
 `;
 
 exports[`Banner > renders with target correctly 1`] = `
-"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary hover:bg-primary/90" data-slot="root"><a href="https://nuxt.com" tabindex="-1" target="_blank" class="focus:outline-none"><span data-v-0fc735df="" class="absolute inset-0" aria-hidden="true"></span></a>
+"<div data-v-0fc735df="" class="banner relative z-50 w-full transition-colors bg-primary hover:bg-primary/90" data-slot="root"><a href="https://nuxt.com" tabindex="-1" rel="noopener noreferrer" target="_blank" class="focus:outline-none"><span data-v-0fc735df="" class="absolute inset-0" aria-hidden="true"></span></a>
   <div data-v-0fc735df="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12" data-slot="container">
     <div data-v-0fc735df="" data-slot="left" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
     <div data-v-0fc735df="" data-slot="center" class="flex items-center gap-1.5 min-w-0">