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

[tanthammar]

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.

[leetwiz]

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.