How to apply auto routes like Nuxt.js on Quasar v2
Tags: javascript, quasar, vue
Published: 2021-07-05 02:47:28

Updated Feb 15, 2022 TL;DR:

{% github ldiebold/quasar-app-extension-auto-routing %}

[issue comment by innominata](https://github.com/quasarframework/quasar/issues/5378#issuecomment-854339977).

## `package.json`

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

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

## `src/route/index.js`

```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`

```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>`](https://github.com/ktsn/vue-cli-plugin-auto-routing#route-custom-block) 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`

```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`

```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!