Dynamically load Vue components from a folder

loadComponents.js

export default ({ Vue }) => {
  const examples = require('../assets/examples').default
  for (const index in examples) {
    import(
      /* webpackChunkName: "examples" */
      /* webpackMode: "lazy-once" */
      `../examples/${examples[index].file}.vue`
    ).then(comp => {
      Vue.component(examples[index].file, comp.default)
    })
  }
}

assets/examples.js goes like this:

function kebabCase (str) {
  const result = str.replace(
    /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,
    match => '-' + match.toLowerCase()
  )
  return (str[0] === str[0].toUpperCase())
    ? result.substring(1)
    : result
}

function slugify (str) {
  return encodeURIComponent(String(str).trim().replace(/\s+/g, '-'))
}

export default require.context('../examples', true, /^\.\/.*\.vue$/)
  .keys()
  .map(page => page.slice(2).replace('.vue', ''))
  .filter(page => page !== 'Index')
  .map(page => ({
    file: page,
    title: page + '.vue',
    path: slugify(kebabCase(page))
  }))