Updated Feb 15, 2022 TL;DR:
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
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
Linting
You may want to ignore linting on the auto-generated routes!
Add the following at the bottom of your .eslintignore file:
/src/router/auto-routing
That's it…
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!
Top comments (0)