Run & review this pull request in StackBlitz Codeflow.

Walkthrough

This pull request introduces changes to the getRoutePath function by adding a new boolean parameter, hasSucceedingSegment, which defaults to false. This parameter modifies the regex pattern for catch-all segments, allowing it to match differently based on the presence of succeeding segments. The generateRoutesFromFiles function is updated to pass this new parameter and replace the variable path with routePath, reflecting the updated logic for route path construction. Additionally, a new test case is added to validate the functionality of generating routes with catch-all parameters positioned in the middle of a path, ensuring performance optimisation. Lastly, a new entry for the temp directory is added to the .gitignore file to prevent it from being tracked by version control. No alterations were made to the declarations of exported or public entities.

Open in Stackblitz

npm i https://pkg.pr.new/@nuxt/kit@31450

npm i https://pkg.pr.new/nuxt@31450

npm i https://pkg.pr.new/@nuxt/schema@31450

npm i https://pkg.pr.new/@nuxt/rspack-builder@31450

npm i https://pkg.pr.new/@nuxt/vite-builder@31450

npm i https://pkg.pr.new/@nuxt/webpack-builder@31450

commit: 9e1d0db

CodSpeed Performance Report

Merging #31450 will not alter performance

_{Comparing fix/catchall-pattern (9e1d0db) with main (7a4cdbc)}

Summary

✅ 10 untouched benchmarks

Hi @danielroe ,

TL;DR: After upgrading from Nuxt 3.15.4 to 3.17.5, nested catch-all routes are no longer being grouped as children but are instead being flattened into separate top-level routes, breaking our existing URL structure.

I'm not directly opening a new issue, because I first want to understand if this is really an issue that needs to be fixed on the Nuxt side.

We have the following structure:

pages/
├── [...layout].vue
├── [...layout]/
│ ├── index.vue
│ └── page-[page].vue

This would have generated something like this in 3.15.4 :

[
  {
    "children": [
      {
        "children": [],
        "file": "/[...layout]/index.vue",
        "name": "layout",
        "path": ""
      },
      {
        "children": [],
        "file": "/[...layout]/page-[page].vue",
        "name": "layout-page-page",
        "path": "page-:page()"
      }
    ],
    "file": "pages/[...layout].vue",
    "path": "/:layout(.*)*"
  }
]

Now in 3.17.5 it generates the following:

[
  {
    "children": [
      {
        "children": [],
        "file": "/[...layout]/index.vue",
        "name": "layout",
        "path": ""
      }
    ],
    "file": "/[...layout].vue",
    "path": "/:layout(.*)*"
  },
  {
    "children": [],
    "file": "/[...layout]/page-[page].vue",
    "meta": undefined,
    "name": "layout-page-page",
    "path": "/:layout([^/]*)*/page-:page()"
  }
]

As you can see, the page-[page].vue is not added as a child of [...layout].vue anymore. What I'm not really sure about is if this change was intentional or if only the regex pattern was supposed to be modified.

The issue: This breaks our existing route structure where /some-category/page-20 should match the catch-all parent with the page child, but now it tries to match the flattened route pattern instead.

Basically, as it stands now I can't upgrade. Changing the URL structure isn't possible since our URLs are dynamically controlled by a CMS where admins can configure arbitrary layout/page combinations. We rely on the flexible nested catch-all routing structure to handle these dynamic CMS-generated routes.

Please let me know if I should open an issue or if this was intended, thanks.

you are right, this is a bug

i believe there is an existing issue but it did not identify the cause, so it might be difficult to find

@danielroe I think the issue is here, I cloned the repo and I'm playing around, basically I added this lines to pages.test.ts:

[
  { path: `${pagesDir}/[...sub].vue` },
  { path: `${pagesDir}/[...sub]/index.vue` },
  { path: `${pagesDir}/[...sub]/route-[slug].vue` }
]

Then I run the test in debug mode, I allow the first two entries to be processed which seems to correctly group them as parent child routes

After a few steps we get here:

The Problem:
When processing [...sub]/route-[slug].vue, the algorithm tries to find a parent route to attach it to. However, it's looking for an exact path match between:

• Expected parent path: /:sub([^/]*)*
• Actual parent path: /:sub(.*)*

Since these don't match exactly, the algorithm fails to recognize the parent-child relationship and creates the route as a separate top-level route instead of nesting it under the catch-all parent.

I have no idea how to actually fix it though.

Thanks

Hello @danielroe ,

Let me know if you want me to create a new issue (I searched through the currently open issues, but I was unable to find one where I can reference my comments).

Thanks

@vsergiu93 please do 🙏