double catch-all doesn't work (both [...slug].vue and a 404.vue)

[talaxasy]

Environment

• Operating System: Linux
• Node Version: v16.17.0
• Nuxt Version: 3.0.0-rc.8
• Package Manager: npm@8.11.0
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

https://stackblitz.com/edit/nuxt-starter-87chgu?file=pages/[...slug].vue

Describe the bug

Catch-all routes don't work like in documentation - https://v3.nuxtjs.org/guide/directory-structure/pages#catch-all-route

Additional context

No response

Logs

No response

[SebbeJohansson]

I can confirm that it doesnt work for me either.
https://stackblitz.com/edit/nuxt-starter-w3dcms?file=pages%2F404.vue,pages%2F[...slug].vue

[danielroe]

The issue is that [...slug].vue and a 404.vue both produce catchall routes and the 'first' one will handle the request.

I'll look into this and see if there's a way we can improve the DX here, or add something to the docs to make this clearer.

https://v3.nuxtjs.org/guide/directory-structure/pages/#catch-all-route

[SebbeJohansson]

@danielroe

The issue is that [...slug].vue and a 404.vue both produce catchall routes and the 'first' one will handle the request.

So if I understand it correctly, the only option is to remove the 404.vue and make a custom solution for the 404?

[jonnyparris]

In case you were facing this issue while trying to use Nuxt Content like I was then you might also want to use the #not-found slot to render your custom 404 content instead of using 404 as a page.

[dixhuit]

Just hit this myself. Why is this only priority 3? Catch-all routes are very common in CMS driven Nuxt sites, as are the need for 404 pages.

[danielroe]

#14702

The issue isn't that catch-all routes don't work, but that adding two catch-all routes leads to unexpected results.

[dixhuit]

The issue isn't that catch-all routes don't work, but that adding two catch-all routes leads to unexpected results.

I get that. That's also my point: having both a catch-all route and a 404 provision (another form of catch-all route) is very common, especially in CMS driven sites.

[manniL]

Instead of using a separate route, you could also render a 404.vue component in your [...slug].vue route when it doesn't match anything ☺️

[dixhuit]

Instead of using a separate route, you could also render a 404.vue component in your [...slug].vue route when it doesn't match anything relaxed

That's exactly what I've had to do for now.