fix(LinkCustom): improve prop binding and prevent error with externals

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 }"
+    v-slot="{ href, target, rel, navigate, exact, isActive, isExactActive, isExternal }"
-    :to="$attrs.to"
+    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">
+<script lang="ts">
-const props = defineProps({
+import { defineComponent } from 'vue'
-  activeClass: {
+import { NuxtLink } from '#components'
-    type: String,
+
-    default: ''
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    ...NuxtLink.props,
+    inactiveClass: {
+      type: String,
+      default: undefined
+    }
   },
-  inactiveClass: {
+  setup (props) {
-    type: String,
+    function resolveLinkClass ({ isActive, isExactActive }: { isActive: boolean, isExactActive: boolean }) {
-    default: ''
+      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>