Posted at
ShoTimeDay 5

Vue コンポーネントを自動で全部読み込む方法

この記事は ShoTime Advent Calendar 2018 の 5 日目の記事です。

const requireComponent = require.context('../components', true, /^.\/(The|Base)[A-Z][a-zA-Z0-9]{0,}\.vue/)

requireComponent.keys().forEach(fileName => {
let baseComponentConfig = requireComponent(fileName)
baseComponentConfig = baseComponentConfig.default || baseComponentConfig
const baseComponentName = baseComponentConfig.name || (
fileName
.replace(/^.+\//, '')
.replace(/\.\w+$/, '')
)
Vue.component(baseComponentName, baseComponentConfig)
})

/^.\/(The|Base)[A-Z][a-zA-Z0-9]{0,}\.vue/ が正規表現で書かれています。上記に挙げたコードでは、 BaseApp.vue TheHeader のようなコンポーネント名を全て自動で読み込むようなコードになっています。

プロジェクトにあわせ適宜書き換えれば良い感じに Component を読み込めると思います。


参照

https://vuejs.org/v2/guide/components-registration.html#Automatic-Global-Registration-of-Base-Components