From 914d156103d5ebca6b14ea705ed329508bf66d74 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 19 Jul 2023 13:08:11 +0200
Subject: [PATCH] fix(LinkCustom): improve prop binding and prevent error with
 externals

---
 .../components/elements/LinkCustom.vue        | 50 +++++++++++--------
 1 file changed, 30 insertions(+), 20 deletions(-)

diff --git a/src/runtime/components/elements/LinkCustom.vue b/src/runtime/components/elements/LinkCustom.vue
index 2886bc42..5ff678b4 100644
--- a/src/runtime/components/elements/LinkCustom.vue
+++ b/src/runtime/components/elements/LinkCustom.vue
@@ -1,41 +1,51 @@
 <template>
-  <button v-if="!$attrs.to" v-bind="$attrs" :class="inactiveClass">
+  <button v-if="!to" v-bind="$attrs" :class="inactiveClass">
     <slot />
   </button>
   <NuxtLink
     v-else
-    v-slot="{ href, navigate, exact, isActive, isExactActive }"
-    :to="$attrs.to"
+    v-slot="{ href, target, rel, navigate, exact, isActive, isExactActive, isExternal }"
+    v-bind="$props"
     custom
   >
     <a
       v-bind="$attrs"
       :href="href"
+      :rel="rel"
+      :target="target"
       :class="resolveLinkClass({ isActive, isExactActive })"
-      @click="navigate"
+      @click="(e) => !isExternal && navigate(e)"
     >
       <slot v-bind="{ isActive: exact ? isExactActive : isActive }" />
     </a>
   </NuxtLink>
 </template>
 
-<script setup lang="ts">
-const props = defineProps({
-  activeClass: {
-    type: String,
-    default: ''
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { NuxtLink } from '#components'
+
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    ...NuxtLink.props,
+    inactiveClass: {
+      type: String,
+      default: undefined
+    }
   },
-  inactiveClass: {
-    type: String,
-    default: ''
+  setup (props) {
+    function resolveLinkClass ({ isActive, isExactActive }: { isActive: boolean, isExactActive: boolean }) {
+      if (isActive || isExactActive) {
+        return props.activeClass
+      }
+
+      return props.inactiveClass
+    }
+
+    return {
+      resolveLinkClass
+    }
   }
 })
-
-function resolveLinkClass ({ isActive, isExactActive }: { isActive: boolean, isExactActive: boolean }) {
-  if (isActive || isExactActive) {
-    return props.activeClass
-  }
-
-  return props.inactiveClass
-}
 </script>