Skip to content

Instantly share code, notes, and snippets.

@reinink
Created November 2, 2018 12:56
Show Gist options
  • Save reinink/a18985cee35a41f3a63585c043926981 to your computer and use it in GitHub Desktop.
Save reinink/a18985cee35a41f3a63585c043926981 to your computer and use it in GitHub Desktop.
Auto register Vue components
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => {
const name = _.last(key.split('/')).split('.')[0]
return Vue.component(name, files(key))
})
const app = new Vue({
el: '#app'
});
@hjJunior
Copy link

hjJunior commented Dec 27, 2021

I have created mine to work with subfolders:

const requireComponent = require.context(
  '../components',
  true,
  /[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)
  const componentName = fileName.split('/').slice(1).join('').split('.')[0];

  Vue.component(
    componentName,
    componentConfig.default || componentConfig
  )
})

This folder structure:

- components
  - Base
    - Button
    - Title

It will register all components will the following names:

  • BaseButton
  • BaseTitle

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