<template>
    <Component :is="type" v-bind="linkProps" class="app-link">
        <slot />
    </Component>
</template>
<script setup>
const props = defineProps({
    to: { type: String, required: true }
})
const isExternal = (path) => /^(https?:|mailto:|tel:)/.test(path);
const type = isExternal(props.to) ? 'a' : 'router-link'
const linkProps = isExternal(props.to) ? { href: props.to, target: '_blank', rel: 'noopener' } : { to: props.to }

</script>

<style scoped>
.app-link {
    text-decoration: none;
}
</style>