Nuxt3で<component :is>を使うと、
コンポーネントや要素を動的に設定できたりする

propsにtoがあるときは、<NuxtLink>にして、
それ以外は<div>にしたいなと思ったときの備忘録(*´ω｀*)

<template>
  <component :is="component" :to="to">
    <slot></slot>
  </component>
</template>


<script setup lang="ts">
const props = defineProps<{
  to?: string;
}>();

const component = computed(() => {
  // NuxtLinkは動的にimportされるため、resolveComponentで取得する
  if (props.to) return resolveComponent('NuxtLink');
  return 'div';
});
</script>