webs/src/components/AppLink/index.vue

<template>
  <component :is="type" v-bind="linkProps(to)">
    <slot></slot>
  </component>
</template>

<script setup lang="ts">
defineOptions({
  name: "AppLink",
  inheritAttrs: false,
});

import { isExternal } from "@/utils/index";

const props = defineProps({
  to: {
    type: String,
    required: true,
  },
});

const isExternalLink = computed(() => isExternal(props.to));

const type = computed(() => {
  return isExternalLink.value ? "a" : "router-link";
});

const linkProps = (to: string) => {
  return isExternalLink.value
    ? { href: to, target: "_blank", rel: "noopener noreferrer" }
    : { to };
};
</script>