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 を読み込めると思います。

参照