vue3でsvgやmdなどフォルダ内にあるファイルを変数でDynamic import(required)でComponentする

iconComponentやpostComponentなど、静的ファイルmoduleを動的に読み込みたい場合のSolution。

ES5では、requiredで変数を使った動的読み込みが可能で、ES6ではどうする？

required(`./${file}.svg`)

→ TSだとlintが反応するのでrequired使えないのでimportを利用する

defineAsyncComponentを利用する

ES モジュールの動的インポートも Promise を返すため

ここがポイントですね。

以下はiconComponentの利用例ですが、vue3(vite)の場合、vite-svg-loaderを利用すればsvgをComponentととして取り扱えるので、以下のようなComponentが作成できます。

vite.config.js

import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [
    vue(),
    svgLoader()
  ]
})

IconBase.vue

<script setup>
import { defineAsyncComponent } from 'vue';

const props = defineProps({
  name: string
});

// svgファイルを非同期読み込み
const iconFile = defineAsyncComponent(() =>
  import(`./icons/${props.name}.svg`)
);
</script>

<template>
  <component :is="icon" />
</template>

<component>が<svg ... />に展開される。
同じようにmd-loaderをつかえば、mdを展開できる。