feat: support vue router next (#16)

404.vue

@@ -0,0 +1,16 @@
+<template>
+  <div :style="{
+    font: '16px/1.6 Roboto, Helvetica, Neue, san-serif',
+    margin: '2rem'
+  }">
+    <h1 style="margin: 0 0 20px 0">
+      Page Not Found :(
+    </h1>
+    <router-link
+      to="/"
+      style="text-decoration: none; color: #41b882;"
+    >
+      ← Back to HomePage
+    </router-link>
+  </div>
+</template>

README.md

@@ -108,6 +108,13 @@ Since `v1.1.11` options for [@ream/collect-fs-routes v1.0.2](https://github.com/
 
 Routes directory, e.g. `src/views`.
 
+### next
+
+- Type: `boolean`
+- Default: `false`
+
+Vue router next [See migration](https://next.router.vuejs.org/guide/migration/#removed-star-or-catch-all-routes).
+
 ### ~~componentPrefix~~
 
 ### match

lib/collect-fs-routes.js

@@ -61,7 +61,8 @@ function renderRoutes(
   {
     chunkPrefix = 'page-',
     componentPrefix = process.cwd(),
-    extraRoutes = []
+    extraRoutes = [],
+    next = false
   } = {}
 ) {
   return `
@@ -73,7 +74,7 @@ function renderRoutes(
     {
       path: ${
         route.path === '/404'
-          ? stringify('*')
+          ? stringify(next ? '/:pathMatch(.*)*' : '*') // vue router next
           : stringify(route.path.replace(/\\/g, '/'))
       },
       ${route.component.match(/\{(.*?)\}/g) ? 'props: true,' : ''}

lib/plugin.js

@@ -12,7 +12,8 @@ module.exports = class VueAutoRoutes {
     this.opts = Object.assign(
       {
         watchMode: false,
-        default404: true
+        default404: true,
+        next: false
       },
       opts
     )
@@ -56,14 +57,14 @@ module.exports = class VueAutoRoutes {
         path: '/404',
         component: path.relative(
           process.cwd(),
-          path.join(__dirname, '../404.js')
+          path.join(__dirname, '../404.vue')
         )
       })
     }
 
     return `export const routes = ${renderRoutes(routes, {
-      dir: this.opts.dir,
-      extraRoutes
+      extraRoutes,
+      next: this.opts.next
     })}
     `
   }

package.json

@@ -12,7 +12,7 @@
   "files": [
     "lib",
     "plugin.js",
-    "404.js"
+    "404.vue"
   ],
   "scripts": {
     "lint": "xo",

test/index.test.js

@@ -1,3 +1,4 @@
+import path from 'path'
 import test from 'ava'
 import { renderRoutes, collectRoutes } from '../lib/collect-fs-routes'
 
@@ -16,3 +17,26 @@ test('main', async t => {
   t.snapshot(JSON.stringify(routes), 'collect routes')
   t.snapshot(routesString, 'render routes')
 })
+
+test('next', async t => {
+  const routes = await collectRoutes(options)
+  const routesString = renderRoutes(
+    [
+      ...routes,
+      {
+        path: '/404',
+        component: path.relative(
+          process.cwd(),
+          path.join(__dirname, '../404.vue')
+        )
+      }
+    ],
+    {
+      componentPrefix: '',
+      next: true
+    }
+  )
+
+  t.snapshot(JSON.stringify(routes), 'collect routes')
+  t.snapshot(routesString, 'render routes')
+})

test/snapshots/index.test.js.md

@@ -52,3 +52,59 @@ Generated by [AVA](https://ava.li).
         ␊
       ]␊
       `
+
+## next
+
+> collect routes
+
+    '[{"path":"/","component":"test/views/index.vue"},{"path":"/bar","component":"test/views/bar/index.vue"},{"path":"/bar/:id","component":"test/views/bar/$id.vue"},{"path":"/foo","component":"test/views/foo/index.vue"},{"path":"/foo/:name","component":"test/views/foo/{name}.vue"}]'
+
+> render routes
+
+    `␊
+      [␊
+        ␊
+        {␊
+          path: "/",␊
+          ␊
+          component: () => import(/* webpackChunkName: "page-test-views-index-vue" */ "test/views/index.vue"),␊
+          ␊
+        }␊
+        ,␊
+        {␊
+          path: "/bar",␊
+          ␊
+          component: () => import(/* webpackChunkName: "page-test-views-bar-index-vue" */ "test/views/bar/index.vue"),␊
+          ␊
+        }␊
+        ,␊
+        {␊
+          path: "/bar/:id",␊
+          ␊
+          component: () => import(/* webpackChunkName: "page-test-views-bar-$id-vue" */ "test/views/bar/$id.vue"),␊
+          ␊
+        }␊
+        ,␊
+        {␊
+          path: "/foo",␊
+          ␊
+          component: () => import(/* webpackChunkName: "page-test-views-foo-index-vue" */ "test/views/foo/index.vue"),␊
+          ␊
+        }␊
+        ,␊
+        {␊
+          path: "/foo/:name",␊
+          props: true,␊
+          component: () => import(/* webpackChunkName: "page-test-views-foo-{name}-vue" */ "test/views/foo/{name}.vue"),␊
+          ␊
+        }␊
+        ,␊
+        {␊
+          path: "/:pathMatch(.*)*",␊
+          ␊
+          component: () => import(/* webpackChunkName: "page-404-vue" */ "404.vue"),␊
+          ␊
+        }␊
+        ␊
+      ]␊
+      `