laravelvue.jsvue-componentlaravel-spark

How to auto register Vue component files for Laravel Spark

Laravel's app.js file includes some commented out code for adding all vue components under a specified directory:

const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

This same code is not included in the latest version of Laravel Spark and does not work when copied over. How do I auto register any vue component files under a specific directory in Laravel Spark?

Solution

  • Place this code in your app.js file somewhere after importing Vue and before instantiating your app's new Vue object:

    const files = require.context('./', true, /\.vue$/i);
files.keys().map(key => Vue.component(files(key).name, files(key)));