Automatically build Vue routes from all *.vue files in src/views/

vue-auto-routes.js

import Vue from 'vue'
import VueRouter from 'vue-router'

// route helper
function route (path, component) {
  if (typeof component === 'string') {
    component = require(`../views/${component.replace('.vue', '')}.vue`).default
  }
  return { path, component }
}

// explicitly set home and 404
const routes = [
  route('/', 'Home'),
  route('*', '404')
]

// use webpack to grab all files
// @see https://webpack.js.org/guides/dependency-management/#context-module-api
const context = require.context('../views', true, /\.vue$/)

// add all other views as routes
context.keys().forEach((file, files) => {
  // parse variables
  file = file.substr(2)
  const path = file
    .replace(/\\/g, '/')
    .replace(/(\w)([A-Z])/g, (m, a, b) => `${a}-${b}`)
    .toLowerCase()
    .replace('.vue', '')
    .replace(/\/index$/, '')

  // add routes if not yet added
  const existing = routes.find(route => route.component.__file.replace('src/views/', '') === file)
  if (!existing) {
    routes.push(route('/' + path, file))
  }
})

// ensure 404 is last
const index = routes.findIndex(route => route.path === '*')
routes.push(routes.splice(index, 1)[0])

// debug
console.log(routes)

// setup and export final router
Vue.use(VueRouter)
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router