Vueコンポーネント一括インポート

  • Updated: 2024.06.25
  • Published: 2024.06.25
  • 55views

概要

個別にインポートしているコンポーネントを、一括で読み込むようにします。


施策

プラグイン作成

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内でインポートしないといけないようです。

コメントを投稿する

CAPTCHA


関連記事

人気の投稿

最新の投稿

タグ

月別アーカイブ

Contact

WEB制作の依頼など気軽にお問い合わせください。

お問い合わせ