Auto register Vue components

app.js

/**
 * 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'
});

Can this be done without the bloated Lodash/Underscore?

Looks awesome!

It gives "[Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded" error. I think this code is only suitable for small apps.

see Laravel 6 and new laravel/ui comment in app.js https://github.com/laravel/ui/blob/master/src/Presets/vue-stubs/app.js

use this for vue 3:

window.Vue = require('vue');

const app = Vue.createApp({});

const files = require.context('./', true, /.vue$/i);
files.keys().map(function (key) {
app.component(key.split('/').pop().split('.')[0], files(key).default);
});

app.mount('#app');

I receive "Failed to mount component: template or render function not defined." error right after placing these two lines of codes!
I also use this in webpack.mix.js to compile Vue JS codes

mix.js('resources/js/app.js', 'public/js')
.vue()

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