DEV Community

Ukjin Yang
Ukjin Yang

Posted on • Updated on

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

issue comment by innominata.

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
Enter fullscreen mode Exit fullscreen mode

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
})
Enter fullscreen mode Exit fullscreen mode

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/'
        }))
      },
    },
    // ...
}
Enter fullscreen mode Exit fullscreen mode

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 ''
}
Enter fullscreen mode Exit fullscreen mode

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
      },
      // ...
    },
    // ...
  }
})
Enter fullscreen mode Exit fullscreen mode

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"
| }

Enter fullscreen mode Exit fullscreen mode

Happy vue coding with Quasar 2!

Discussion (0)