WIP: feat: new routing system to allow multiple route params

[Atinux]

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

The breaking change only affects users that have a $ in the files inside pages/ (should not exists but we never know).

Description

The idea is to replace the pages/_dynamic.vue to pages/$dynamic.vue.

Main advantage, usage of params:

• In the middleware of the route (pages/author-$username.vue)
• Multiple route params (pages/product-$sku-$variant.vue)

I also added a warning for easier migration.

This change is planned for Nuxt 3.

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly. (PR: #)
• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests are passing.

[Atinux]

We may need to clean the next branch so we can start working on it again :)

[ricardogobbosouza]

@Atinux
I think the $ key could be configurable, what do you think?

[begueradj]

But this is a breaking change. I mean application done with previous Nuxt.js versions will need to be re-written.

[ricardogobbosouza]

Being configurable and defined the default with _ can be released as an improvement and in nuxt 3 it would change to $

[Atinux]

@begueradj actually it will still work with _dynamic.vue with Nuxt 3 but will be deprecated and removed with Nuxt 4.

I don't think it's a good idea to make it configurable since it starts becoming a standard.

The only breaking change is that if someone has a $ in the pages files 😄

[codecov-io]

Codecov Report

Merging #5911 into next will decrease coverage by 0.03%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##             next    #5911      +/-   ##
==========================================
- Coverage   95.72%   95.69%   -0.04%     
==========================================
  Files          82       82              
  Lines        2689     2693       +4     
  Branches      690      692       +2     
==========================================
+ Hits         2574     2577       +3     
- Misses         97       98       +1     
  Partials       18       18

Flag	Coverage Δ
#e2e	100% <ø> (ø)	⬆️
#fixtures	50.42% <100%> (+0.07%)	⬆️
#unit	92.68% <100%> (-0.03%)	⬇️

Impacted Files	Coverage Δ
packages/utils/src/route.js	100% <100%> (ø)	⬆️
packages/vue-renderer/src/renderer.js	93.49% <0%> (-0.82%)	⬇️
packages/webpack/src/utils/style-loader.js	94.11% <0%> (ø)	⬆️
packages/config/src/config/build.js	100% <0%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update de526f6...d7dc5d2. Read the comment docs.

[2nthony]

Awesome!

Did you guys ever considered support Passing Props to Route Components?

I don't know how many guys using this feature, but support this feature not a bad idea to nuxt, huh?🤔

[Atinux]

You can add this feature by using extendRoutes @evillt :)

We are going to move to [variable] instead since $ is used by the shell, see vercel/next.js#7607 (comment)

[2nthony]

@Atinux

Yes!

But I want to mean is:

Create a file {id}.vue under the pages folder, will auto transform to

{
  path: '/:id',
  props: true,
  ...
}

by nuxt routing system.

Of course advanced route config will still using extendRoutes.

[Atinux]

@evillt for this I recommend to use the router-extras-module to active such options :)

[2nthony]

@Atinux Sure!

[Atinux]

Finally, since [] will also break in next OS X terminal, the _ is the better alternative from my POV so we will stick to it :)