Custom loading component for all lazy loaded Vue Router routes

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Loading from './components/Loading.vue'

Vue.use(Router)

const withAsyncAndLoading = routes =>
  routes.map(route => {
    const component = route.component

    if (component.then !== undefined) {
      return {
        ...route,
        component: () => ({
          component,
          loading: Loading
        })
      }
    } else {
      return route
    }
  })

export default new Router({
  mode: 'history',
  routes: withAsyncAndLoading([
    {
      path: '*',
      component: import(/* webpackChunkName: "404" */ './views/404.vue')
    },
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      component: import(/* webpackChunkName: "login" */ './views/Login.vue')
    },
    {
      path: '/register',
      name: 'register',
      component: import(/* webpackChunkName: "register" */ './views/Register.vue')
    },
    {
      path: '/settings',
      name: 'settings',
      component: import(/* webpackChunkName: "settings" */ './views/Settings.vue')
    }
  ])
})