fix(Link): consistent behavior between nuxt, vue and inertia

src/runtime/components/Link.vue

@@ -89,11 +89,12 @@ export interface LinkSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { defu } from 'defu'
-import { isEqual, diff } from 'ohash/utils'
+import { isEqual } from 'ohash/utils'
 import { useForwardProps } from 'reka-ui'
 import { reactiveOmit } from '@vueuse/core'
 import { useRoute, useAppConfig } from '#imports'
 import { tv } from '../utils/tv'
+import { isPartiallyEqual } from '../utils/link'
 import ULinkBase from './LinkBase.vue'
 
 defineOptions({ inheritAttrs: false })
@@ -125,20 +126,6 @@ const ui = computed(() => tv({
   }, appConfig.ui?.link || {})
 }))
 
-function isPartiallyEqual(item1: any, item2: any) {
-  const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
-    if (q.type === 'added') {
-      filtered.add(q.key)
-    }
-    return filtered
-  }, new Set<string>())
-
-  const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key)))
-  const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key)))
-
-  return isEqual(item1Filtered, item2Filtered)
-}
-
 function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
   if (props.active !== undefined) {
     return props.active

src/runtime/inertia/components/Link.vue

@@ -7,7 +7,7 @@ import type { ComponentConfig } from '../../types/utils'
 
 type Link = ComponentConfig<typeof theme, AppConfig, 'link'>
 
-interface NuxtLinkProps extends Omit<InertiaLinkProps, 'href'> {
+interface NuxtLinkProps extends Omit<InertiaLinkProps, 'href' | 'onClick'> {
   activeClass?: string
   /**
    * Route Location the link should navigate to when clicked on.
@@ -78,6 +78,8 @@ const props = withDefaults(defineProps<LinkProps>(), {
 })
 defineSlots<LinkSlots>()
 
+const page = usePage()
+
 const appConfig = useAppConfig() as Link['AppConfig']
 
 const routerLinkProps = useForwardProps(reactiveOmit(props, 'as', 'type', 'disabled', 'active', 'exact', 'activeClass', 'inactiveClass', 'to', 'raw', 'class'))
@@ -100,34 +102,49 @@ const isExternal = computed(() => {
   return typeof props.to === 'string' && hasProtocol(props.to, { acceptRelative: true })
 })
 
+const isLinkActive = computed(() => {
+  if (props.active !== undefined) {
+    return props.active
+  }
+
+  if (!props.to) {
+    return false
+  }
+
+  if (props.exact && page.url === props.to) {
+    return true
+  }
+
+  if (!props.exact && page.url.startsWith(props.to)) {
+    return true
+  }
+
+  return false
+})
+
 const linkClass = computed(() => {
-  const active = isActive.value
+  const active = isLinkActive.value
 
   if (props.raw) {
     return [props.class, active ? props.activeClass : props.inactiveClass]
   }
 
   return ui.value({ class: props.class, active, disabled: props.disabled })
 })
-
-const page = usePage()
-const url = computed(() => props.to ?? props.href ?? '')
-
-const isActive = computed(() => props.active || (!!url.value && (props.exact ? url.value === props.href : page?.url.startsWith(url.value))))
 </script>
 
 <template>
-  <template v-if="!isExternal && !!url">
-    <InertiaLink v-bind="routerLinkProps" :href="url">
+  <template v-if="!isExternal">
+    <InertiaLink v-bind="routerLinkProps" :href="props.to || ''">
       <template v-if="custom">
         <slot
           v-bind="{
             ...$attrs,
             as,
             type,
             disabled,
-            href: url,
-            active: isActive
+            href: props.to,
+            active: isLinkActive
           }"
         />
       </template>
@@ -138,12 +155,12 @@ const isActive = computed(() => props.active || (!!url.value && (props.exact ? u
           as,
           type,
           disabled,
-          href: url,
-          active: isActive
+          href: props.to,
+          active: isLinkActive
         }"
         :class="linkClass"
       >
-        <slot :active="isActive" />
+        <slot :active="isLinkActive" />
       </ULinkBase>
     </InertiaLink>
   </template>
@@ -156,9 +173,9 @@ const isActive = computed(() => props.active || (!!url.value && (props.exact ? u
           as,
           type,
           disabled,
-          href: to,
+          href: props.to,
           target: isExternal ? '_blank' : undefined,
-          active: isActive
+          active: isLinkActive
         }"
       />
     </template>
@@ -169,14 +186,14 @@ const isActive = computed(() => props.active || (!!url.value && (props.exact ? u
         as,
         type,
         disabled,
-        href: url,
+        href: props.to,
         target: isExternal ? '_blank' : undefined,
-        active: isActive
+        active: isLinkActive
       }"
       :is-external="isExternal"
       :class="linkClass"
     >
-      <slot :active="isActive" />
+      <slot :active="isLinkActive" />
     </ULinkBase>
   </template>
 </template>

src/runtime/utils/link.ts

@@ -1,4 +1,5 @@
 import { reactivePick } from '@vueuse/core'
+import { isEqual, diff } from 'ohash/utils'
 import type { LinkProps } from '../types'
 
 export function pickLinkProps(link: LinkProps & { [key: string]: any }) {
@@ -19,3 +20,17 @@ export function pickLinkProps(link: LinkProps & { [key: string]: any }) {
 
   return reactivePick(link, ...propsToInclude)
 }
+
+export function isPartiallyEqual(item1: any, item2: any) {
+  const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
+    if (q.type === 'added') {
+      filtered.add(q.key)
+    }
+    return filtered
+  }, new Set<string>())
+
+  const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key)))
+  const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key)))
+
+  return isEqual(item1Filtered, item2Filtered)
+}

src/runtime/vue/components/Link.vue

@@ -87,15 +87,16 @@ export interface LinkSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, getCurrentInstance } from 'vue'
+import { computed } from 'vue'
 import { defu } from 'defu'
-import { isEqual, diff } from 'ohash/utils'
+import { isEqual } from 'ohash/utils'
 import { useForwardProps } from 'reka-ui'
 import { reactiveOmit } from '@vueuse/core'
 import { hasProtocol } from 'ufo'
 import { useRoute, RouterLink } from 'vue-router'
 import { useAppConfig } from '#imports'
 import { tv } from '../../utils/tv'
+import { isPartiallyEqual } from '../../utils/link'
 
 defineOptions({ inheritAttrs: false })
 
@@ -109,21 +110,7 @@ const props = withDefaults(defineProps<LinkProps>(), {
 })
 defineSlots<LinkSlots>()
 
-// Check if vue-router is available by checking for the injection key
-const hasRouter = computed(() => {
-  const app = getCurrentInstance()?.appContext.app
-  return !!(app?.config?.globalProperties?.$router)
-})
-
-// Only try to get route if router exists
-const route = computed(() => {
-  if (!hasRouter.value) return null
-  try {
-    return useRoute()
-  } catch {
-    return null
-  }
-})
+const route = useRoute()
 
 const appConfig = useAppConfig() as Link['AppConfig']
 
@@ -141,21 +128,8 @@ const ui = computed(() => tv({
   }, appConfig.ui?.link || {})
 }))
 
-function isPartiallyEqual(item1: any, item2: any) {
-  const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
-    if (q.type === 'added') {
-      filtered.add(q.key)
-    }
-    return filtered
-  }, new Set<string>())
-
-  const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key)))
-  const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key)))
-
-  return isEqual(item1Filtered, item2Filtered)
-}
-
 const isExternal = computed(() => {
+  if (props.external) return true
   if (!props.to) return false
   return typeof props.to === 'string' && hasProtocol(props.to, { acceptRelative: true })
 })
@@ -165,17 +139,17 @@ function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
     return props.active
   }
 
-  if (!props.to || !route.value) {
+  if (!props.to) {
     return false
   }
 
   if (props.exactQuery === 'partial') {
-    if (!isPartiallyEqual(linkRoute.query, route.value.query)) return false
+    if (!isPartiallyEqual(linkRoute.query, route.query)) return false
   } else if (props.exactQuery === true) {
-    if (!isEqual(linkRoute.query, route.value.query)) return false
+    if (!isEqual(linkRoute.query, route.query)) return false
   }
 
-  if (props.exactHash && linkRoute.hash !== route.value.hash) {
+  if (props.exactHash && linkRoute.hash !== route.hash) {
     return false
   }
 
@@ -202,8 +176,8 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
 </script>
 
 <template>
-  <template v-if="hasRouter && !isExternal">
-    <RouterLink v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }" v-bind="routerLinkProps" :to="to || '#'" custom>
+  <template v-if="!isExternal">
+    <RouterLink v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }" v-bind="routerLinkProps" :to="to || ''" custom>
       <template v-if="custom">
         <slot
           v-bind="{