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 .eslintrc file:
/src/router/auto-routing
That's it! Start adding pages to your src/pages directory and the routing will be automagically done for you!
Also take a look at src/layouts/default.vue to change the default used layout.
A note about routePrefix
When adding a routePrefix in quasar.extensions.json, be sure to also set "nested": true inside generatorConfig. This is best shown with an example!
{
"auto-routing": {
"pagesDir": "src/pages",
"routePrefix": "/admin", // 🤿 Set a prefix for routes
"layoutsDir": "src/layouts",
"ignorePattern": "/(^|[/\\])../",
"outDir": "src/router/auto-routing",
"pagesImportPrefix": "pages/",
"generatorConfig": {
"nested": true // 🤿 Tell the generator to treat ALL routes as nested.
}
}
}
References
Note that we can also proxy settings to vue-route-generator with the generatorConfig property
pagesDir: path to the page componentsroutePrefix: prefix all routes (e.g./posts). See section above on "routePrefix"layoutsDir: path to the layout componentsignorePattern: files that match this pattern will be ignored by the generator in yourpagesandlayoutdiroutDir: directory that holds generated routespagesImportPrefix: When generating routes, this prefix is used. By default, we use Quasar'spagesalias (pages/)generatorConfig: See vue-route-generator "References" for all available options
Find out more
Want to know how it all works? Take a look at vue-route-generator, which is what this App Extension is built on!
Donate
If you appreciate the work that went into this App Extension, please consider donating to Quasar.
19 Sep 25, 2022
22 Oct 20, 2022
4 Oct 26, 2022
134 Dec 11, 2022
42 Nov 2, 2022
9 Jan 14, 2022
4 Nov 20, 2022
390 Dec 20, 2022
5 Jul 23, 2022
69 Nov 8, 2022