Vue.js フォルダ内のコンポーネントをまとめてグローバルコンポーネントに登録する
特定のフォルダ内にあるシングルファイルコンポーネントを、他のコンポーネントからもグローバルに参照できるように設定します。
webpackを使用している前提とします。
sharedフォルダにあるコンポーネントを他のコンポーネントでも使用できるようにします。 + /shared + .test1.vue + .test2.vue + .test3.vue
以下のように使用したいコンポーネントをimportすれば使用できますが、使用頻度が高いコンポーネントはグローバルに登録しておけば、各ファイルでそれぞれimportする処理を記載せずにすみます。
<template>
<test1></test1>
</template>
<script>
import test1 from './shared/test1.vue'; //各ファイルで記載したくない
export default {
components: [test1]
}
</script>エントリポイントのファイルに以下を記載します。
main.js// sharedフォルダは以下のvueファイルを読み込み
const files = require.context('./shared', true, /\.vue$/);
const components = {};
files.keys().forEach(key => {
components[key.replace(/(\.\/|\.vue)/g, '')] = files(key).default;
});
// 読み込んだvueファイルをグローバルコンポーネントとして登録
Object.keys(components).forEach(key => {
Vue.component(key, components[key]);
});グローバルコンポーネントとして登録しておけば、各ファイルでimportすることなくコンポーネントを使用することができます。
<template>
<test1></test1>
</template>
<script>
export default {
}
</script>