How to apply auto routes like Nuxt.js on Quasar v2

package.json

install vue-auto-routing and vue-router-layout.

$ npm i -D vue-auto-routing vue-router-layout
# or
$ yarn add -D vue-auto-routing vue-router-layout

src/route/index.js

import { route } from 'quasar/wrappers'
import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
import autoroutes from 'vue-auto-routing'
autoroutes.unshift({ path: '', component: () => import('pages/index.vue') })
import { createRouterLayout } from 'vue-router-layout'
const RouterLayout = createRouterLayout(layout => {
  return import('layouts/' + layout + '.vue')
})
const routes = [{ path: '/', component: RouterLayout, children: autoroutes }]
export default route(function (/* { store, ssrContext } */) {
  const createHistory = process.env.SERVER
    ? createMemoryHistory
    : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)

  const Router = createRouter({
    scrollBehavior: () => ({ left: 0, top: 0 }),
    routes,
    history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE)
  })
  return Router
})

Yes. you can delete src/route/routes.js if you don't need extra routes.

quasar.conf.js

// ... quasar imports
const VueAutoRoutingPlugin = require('vue-auto-routing/lib/webpack-plugin')

// ...

module.exports = configure(function (ctx) {
  return {
    // ...
    build: {
      // ...
      // Add
      extendWebpack (cfg, { isServer, isClient }) {
        cfg.plugins.push(new VueAutoRoutingPlugin({
          pages: 'src/pages',
          importPrefix: 'pages/'
        }))
      },
    },
    // ...
}

Then run quasar run and you should see your vue page via your vue page path within pages folder.

UPDATE Jul 6, 2021 by Me

In order to use <route> tag for per-page route difinition, You should add a js file with dummy function and edit quasar.conf.js for avoid build error.

src/route/loader.js

module.exports = function () {
  return ''
}

because quasar.config.js and webpack use CommonJS.
Of course, you can make this file in path you want to.

quasar.config.js

module.exports = configure(function (ctx) {
  return {
    // ...
    build: {
      // ...
      chainWebpack (chain) {
        // add these lines below:
        chain.module.rule('route-meta')
          .post()
          .resourceQuery(/blockType=route/)
          .use('route-meta')
          .loader(require.resolve('./src/router/loader.js'))
        // ...rest of webapck chaining
      },
      // ...
    },
    // ...
  }
})

on build, you won't see the error like:

Module parse failed: Unexpected token (3:8)
File was processed with these loaders:
 * ./node_modules/@quasar/app/lib/webpack/loader.vue.auto-import-quasar.js
 * ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
|
| {
>   "name": "WhyNotWorkingWithRouteTag"
| }

Happy vue coding with Quasar 2!