Nuxt3 で動的コンポーネント

nuxt3/vue3/vite/nitro/electron

dataを元にページ内コンテンツを動的生成したくてこの辺りを見てようやく分かったので備忘録。

// nuxt.config.ts
export default defineNuxtConfig({
  components: {
    dirs: [
      {
        path: "~/components/test",
        global: true, //動的追加したいコンポーネントをGlobal登録しとく
      },

<script setup lang="ts">
const names = ref([]);

//この辺りのdataInputはお好きなように
names.value.push("Text1"); // ~/components/test/Text1.vue
names.value.push("Text2");
names.value.push("Text3");

const getComp = (index) => {
  const name = names.value[index];
  return resolveComponent(name);
};
</script>

<template>
	<section v-for="(item, index) in names">
		<component :is="getComp(index)" />
	</section>
</template>

こんな感じでいけた。

あとはresolveComponent使わない方法でvueファイルに相対パスで直接importの方法もあった。

const comp = ref();
comp.value = defineAsyncComponent(
  () => import(`../components/test/Text1.vue`)
);
<component :is="comp" />

Nuxt3覚えるの楽しい。

you