Auto generate routes, based on folder structure and file names.

[tanthammar]

trafficstars

Is your feature request related to a problem? Please describe. No

Describe the solution you'd like 'routes' to be autogenerated, based on the folder structure in src/pages. No need to add them manually to routes.js

Describe alternatives you've considered Tried to port this vue cli plugin without success: https://github.com/ktsn/vue-cli-plugin-auto-routing

Additional context I used that plugin before. Like it because it has options, for dynamic imports, chunk naming, prefixes and route params based on file naming.

[pdanpdan]

You just need to create a simple javascript code that reads the folders and creates the file as per your need. There is no way one configuration can match everything, that's the reason the route definition files are needed.

[rstoenescu]

This feature is planned. Will get to it as time allows, but the current todo list is huge.

[lucasfernog]

I like this one, but it's a lot of work. The vue-cli-plugin-auto-routing looks good, but there's some things I think we should do differently:

• Define layouts->page relationships on the layout component, not the page (on one of my projects I use one layout for more than one page, and one page for more than one layout)
• Define route parameters in the same structure as the meta

[lucasfernog]

@rstoenescu do you think this should be an app extension? I think it's going to be a lot of code, but it's a feature that belongs to core

[euphemism]

@lucasfernog Are you looking for parity with Nuxt's route generation?

I haven't put a lot of thought into this, but having to configure the details of the layout -> page relationship on the layout component and not the page takes away some of the appeal/simplicity of the auto route generation. My opinion here is that having the complete route configuration in the page file as opposed to having the configuration in two separate places, layout and page, is a superior choice. Otherwise, having to manually add the page to the layout file is about the same as manually adding entries to the routes.js file.

Edit: For a little more context, the team at work is wanting the automatic route generation for our Quasar project. So we have an interest in helping with writing the feature.

[lucasfernog]

@euphemism I guess we can make something similar with Nuxt's route generation, but there might be room for improvements, I'm going to start researching later tonight.

BTW, we are so happy that your team wants to help, that's great! I'm going to focus on this so we can start soon.

[hawkeye64]

This is an interesting conversation. Could a page contain meta information at the top that could be yaml-like and read by something like grey-matter?

[lucasfernog]

This is an interesting conversation. Could a page contain meta information at the top that could be yaml-like and read by something like grey-matter?

Well, vue-cli-plugin-auto-routing does something like that, you write a tag that it reads.

[euphemism]

Specifically this: https://github.com/ktsn/vue-route-generator#route-meta which I really like as it is very explicit what the block is for, and because it's separated from the Vue component script block it won't be confused for component data.

[lucasfernog]

Yestarday I started researching about auto generating routes, and here is the initial collection of requirements/possibilities: https://hackmd.io/hmJB1oJdRrK2F7ZFhTY8JA

I will turn this into a RFC and post it here when its finished.

[1001v]

@lucasfernog, please note that nuxt allows to define meta (for route.meta) inside page component.

[lucasfernog]

Started working here: https://github.com/lucasfernog/quasar/tree/feature/route-generation

There's something crazy that we'll need to solve: HMR.

[hawkeye64]

I kind of figured there would be files that are modified used in the static generation, and then the route generator creates/updates other files and those are used in the route. Similar to a user modifying files today. Then HMR would rebuild and send them to client.

[ghost]

this would be an awesome feature addition to quasar, hope it will be integrated to quasar.

[rstoenescu]

@lucasfernog Try to use (example): require.context('./components', true, /^\.\/.*\.vue$/, 'lazy') instead of fs and HMR will just work out of the box

[SacDin]

May be we can port it from here : https://github.com/nuxt/nuxt.js/blob/dev/packages/generator/src/generator.js#L97

[tanthammar]

Any progress on this feature?

[hawkeye64]

@tanthammar It's likely to be a v2.0 feature. Keep discussing. We are listening to ideas and discussing ourselves on best approaches.

[innominata]

Is your feature request related to a problem? Please describe. No

Describe the solution you'd like 'routes' to be autogenerated, based on the folder structure in src/pages. No need to add them manually to routes.js

Describe alternatives you've considered Tried to port this vue cli plugin without success: https://github.com/ktsn/vue-cli-plugin-auto-routing

Additional context I used that plugin before. Like it because it has options, for dynamic imports, chunk naming, prefixes and route params based on file naming.

I've got vue-auto-routing and vue-router-layout working with quasar 2, if you're still stuck hopefully this helps

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

My quasar.config starts like this

const ESLintPlugin = require('eslint-webpack-plugin')
const { configure } = require('quasar/wrappers')
const VueAutoRoutingPlugin = require('vue-auto-routing/lib/webpack-plugin')
module.exports = configure(function (ctx) {
  return {
    supportTS: false,
    boot: [
    'components'
    ],
    css: [
      'app.scss'
    ],
    extras: [
      'line-awesome',
      'roboto-font', // optional, you are not bound to it
      'material-icons' // optional, you are not bound to it
    ],
    build: {
      vueRouterMode: 'history', // available values: 'hash', 'history'
      extendWebpack (cfg, { isServer, isClient }) {
          cfg.plugins.push(new VueAutoRoutingPlugin({
          pages: 'src/pages',
          importPrefix: 'pages/'
        }))
    },

comments removed for brevity

[HendrikJan]

@webnoob, has there been any progress on this feature?

[sheecegardezi]

This worked like a charm for me: https://dev.to/composite/how-to-apply-auto-routes-like-nuxt-js-on-quasar-v2-5mb

[hawkeye64]

Possible reference: https://github.com/hawkeye64/QPublisher-RFCS

[ldiebold]

@tanthammar @sheecegardezi @innominata @HendrikJan @SacDin @ghost @euphemism

Here's an iteration of an AE for this: quasar ext add auto-routing

Source Code

I don't have a lot of time, so would love feedback/PRs if anything is missing!

It's built on top of vue-auto-generator and vue-router-layout which to the best of my knowledge, is feature parody with nuxt routing. Therefore it should be safe to say this AE gives you Nuxt-like routing in Quasar

Quasar will likely roll their own but for now, we might as well build on top of the tried and true work done by nuxt! And...

From what I've seen in the RFC, Quasar's auto-routing probably won't differ much, and therefore migrations shouldn't be too painful :relaxed:

[Kolawole26]

Hi, I am new to Quasar, would like to know how to create a page and route for a dynamic page which the id will be added to the route e.g /Post/:id

[septatrix]

My fear is that a adding more and more features to Quasar will exhaust the development capacity and steal resources from the (to my eyes) core part of Quasar: components. With its fast switch to Vue 3 quasar has gained many users looking for great Vue 3 component libraries while Vuetify, Element etc where all lagging behind. I do not want to say that adding file routing is bad per se, though I feel like a lot more would be won if we think about Quasar as two parts (the component library on one hand and the framework, cross-platform features, potential page routing, extensions, ... on the other hand) and embrace and increase the interoperability of the component library. Nuxt is already a great Framework and recreating some of its features while still missing some other great ones (API routes etc.) takes resources from making the component library even better.

[outluch]

Just found this. And it works. https://github.com/hannoeru/vite-plugin-pages