くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Nuxt.js > Nuxtの<component :is>でNuxtLinkをつかいたい

Nuxtの<component :is>でNuxtLinkをつかいたい

Nuxt.js Nuxt3

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>

以上!! これでコンポーネントづくりが捗る...(*´ω｀*)

参考にしたサイト様