2. Component Registration - Vue JS Optimisations

ComponentRegistration.js

/*
* Loads components from this directory with the name format of 'base-{name}.vue'.
* Components are registered globally.
* Note - don't do this for every component as this will bloat your bundles
*/

import Vue from 'vue';
import upperFirst from 'lodash/upperFirst';
import camelCase from 'lodash/camelCase';

// Require a base component context
const requireComponent = require.context(
  '.', false, /base-[\w-]+\.vue$/
)

requireComponent.keys().forEach(fileName => {
  // Get Component config
  const componentConfig = requireComponent(fileName);
  
  // Get PascalCase name of component
  const componentName = upperFirst(
    camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, ''))
  )
  
  // Register component globally
  Vue.component(componentName, componentConfig.default || componentConfig)
})