Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save EmilyRosina/5a2e50663d499a52e9566938a05f587c to your computer and use it in GitHub Desktop.
Save EmilyRosina/5a2e50663d499a52e9566938a05f587c to your computer and use it in GitHub Desktop.

in main.js or utils/globalComponents.js

  import Vue from 'vue'
  import upperFirst from 'lodash/upperFirst' // could be vue.filter
  import camelCase from 'lodash/camelCase' // could be vue.filter

  // Require in a **base** component context
  // nb: you can use any prefix you want instead of 'base' below
  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
  // nb: componentConfig.default: webpack/es6, componentConfig: es5
  Vue.component(componentName, componentConfig.default || componentConfig)
  })

source: 7 Secret Patterns Vue Consultants Don’t Want You to Know

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment