DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Ukjin Yang
Ukjin Yang

Posted on • Updated on

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

Updated Feb 15, 2022 TL;DR:

GitHub logo ldiebold / quasar-app-extension-auto-routing

"Nuxt-like" routing in Quasar projects

Quasar App Extension auto-routing

"Nuxt-like" routing in Quasar projects

Install

quasar ext add auto-routing
Enter fullscreen mode Exit fullscreen mode

Quasar CLI will retrieve it from the NPM registry and install the extension to your project.

Lastly, dive into src/router/routes.js and use the generated routes:

import generatedRoutes from './auto-routing' // 🀿 Here

const routes = [
  ...generatedRoutes, // 🀿 And here
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') }
    ]
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/Error404.vue')
  }
]

export default routes
Enter fullscreen mode Exit fullscreen mode

Linting

You may want to ignore linting on the auto-generated routes! Add the following at the bottom of your .eslintrc file:

/src/router/auto-routing

That's it…

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!

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.