Old-school dynamic/async Vue components

backend.js

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */
// Register all Async Vue components
for (const file of require.context('./', true, /\.vue$/i, 'lazy').keys()) {
    const componentName = file
        .split('/')
        .splice(2) // Remove folder name, e.g. 'components' or 'views', from filenames.
        .map((s) => s.charAt(0).toUpperCase() + s.slice(1)) // Make sure component names are capitalized.
        .join('')
        .replace('.vue', '') // Remove .vue extension from filenames.
    ;

    if (componentName !== '') {
        Vue.component(componentName, () => import(`${file}` /* webpackChunkName: "backend/[request]" */));
    }
}