Autoload routes as modules - vue.js

Question

I've managed to create an autoloader for vuex store files, but I can't get it to work for vue-router files.
I always get the error [vue-router] "path" is required in a route configuration.
index.js autoload file
import camelCase from 'lodash/camelCase';
const requireRoute = require.context('.', false, /\.js$/); // extract js files inside modules folder
const routes = {};
requireRoute.keys().forEach((fileName) => {
if (fileName === './index.js') return; // reject the index.js file
const routeName = camelCase(fileName.replace(/(\.\/|\.js)/g, '')); //
routes[routeName] = requireRoute(fileName).default;
});
export default routes;
router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue';
import routes from '#/routes/modules';
Vue.use(Router);
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home,
meta: {
icon: 'fa-tachometer',
title: 'Dashboard',
inMenu: true,
},
},
routes,
],
});
Can anybody point me in the right direction?

Answer 1

Try to spread your routes object, so your main routes will contain not a single object, but a bunch of objects:
routes: [
{
path: '/',
name: 'home',
component: Home,
meta: {
icon: 'fa-tachometer',
title: 'Dashboard',
inMenu: true,
},
},
...routes,
],

Answer 2

I had to set const routes = []; and had to .push() it to the array.
So the following code works:
index.js
const requireRoute = require.context('.', false, /\.js$/); // extract js files inside modules folder
const routes = [];
requireRoute.keys().forEach((fileName) => {
if (fileName === './index.js') return; // reject the index.js file
routes.push(requireRoute(fileName).default);
});
export default routes;
router.js
import Vue from 'vue';
import Router from 'vue-router';
import routes from '#/routes/modules';
Vue.use(Router);
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes,
});