Spookie/assets/js/components/AppLink.vue

<template>
	<div>
		<div v-if="isExternal">
			<a :href="to">
				<span
					:class="`fa fa-lg fa-fw ${fa}`"
					aria-hidden="true"
				/>
				&nbsp;
				<slot/>
			</a>
			&nbsp;
			<span
				class="fa fa-lg fa-fw fa-external-link"
				aria-hidden="true"
			/>
		</div>
		<router-link
			v-else
			:to="{ name: props.to }"
		>
			<span
				:class="`fa fa-lg fa-fw  ${fa}`"
				aria-hidden="true"
			/>
			&nbsp;
			<slot/>
		</router-link>
	</div>
</template>

<script setup>
import { computed } from 'vue'
import { RouterLink } from 'vue-router'

const props = defineProps({
	to: {
		type: String,
		required: true
	},
	fa: {
		type: String,
		default: ''
	}
})

const isExternal = computed(() => props.to.startsWith('http'))
</script>