概要
個別にインポートしているコンポーネントを、一括で読み込むようにします。
施策
プラグイン作成
src/plugins/componentsLoader.js
componentsフォルダ内のvue拡張子のファイルをインポートするようにします。
const components = import.meta.glob("@/components/**/*.vue");
export default function loadComponents(app) {
Object.entries(components).forEach(([path, component]) => {
let componentName = path.split('/').pop().replace('.vue','');
component().then((r)=>{
app.component(`${componentName}`, r.default);
});
});
}main.jsに追加
かなり省略していますが、プラグインを読み込んで、createAppで作成したappを関数loadComponentsに渡しています。
import loadComponents from '@/plugins/componentsLoader';
const app = createApp(App)
// 共通コンポーネント追加
loadComponents(app)注意点
注意点というか私が出来なかっただけですが、App.vueに使用するコンポーネントは、App.vue内でインポートしないといけないようです。
コメントを投稿する