Nuxt.jsでコンポーネントを一括登録する
create: 2019-10-19
Nuxt.js Vue.js

Nuxt.js + Buefy 開発環境、快適。

いちいちコンポーネントを登録するのがめんどくさい

Nuxt.js、便利ですがコンポーネントを作成したらimportするとか.jsファイルに登録するとかちょっと面倒です。
特にプロジェクトで大量に作成しなきゃいけないときとか、登録用の JS ファイルが競合したりもします。

ビルド時に一括読み込み

webpackの仕組みで、ビルド時に指定ディレクトリを見て一括登録できます。
Vue.js のドキュメントに書いてありました。

他にも、mixinfilterも一括登録したいですよね。
それをもとに書き起こしたのがこちら。

// ファイル名をコンポーネント名に変換する
function pascal2ComponentName(fileName) {
  const temp = pascal2camel(fileName)
  return temp[0].toUpperCase() + temp.substr(1)
}

// ファイル名をキャメルケースに変換する
function pascal2camel(fileName) {
  return fileName
    .split('/')
    .pop()
    .replace(/-(\w)/g, (_all, w) => w.toUpperCase())
    .replace(/\.\w+$/, '') // ファイル拡張子は不要
}

// mixin自動登録
const requireMixins = require.context('~/assets/js/mixin', true, /.*\.js/)
requireMixins.keys().forEach((fileName) => {
  const mixin = requireMixins(fileName)
  Vue.mixin({ mixins: [mixin.default || mixin] })
})

// filter自動登録
const requireFilters = require.context('~/assets/js/filters', true, /.*\.js/)
requireFilters.keys().forEach((fileName) => {
  const filter = requireFilters(fileName)
  const filterName = pascal2camel(fileName)
  Vue.filter(filterName, filter.default || filter)
})

// component自動登録
const requireComponent = require.context('~/components/common', true, /.*\.vue/)
requireComponent.keys().forEach((fileName) => {
  const component = requireComponent(fileName)
  const componentName = pascal2ComponentName(fileName)
  Vue.component(componentName, component.default || component)
})

ご自分の環境に合わせて

require.context('~/components/common', true, /.*\.vue/)

のパスと拡張子部分を書き換えると良いと思います。

グッドラック 👍