Nuxt.jsでコンポーネントを一括登録する

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

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

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

ビルド時に一括読み込み

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

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

// ファイル名をコンポーネント名に変換する  
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/)  

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

グッドラック 👍