allow manually redirecting to 404 route within a dynamic slug

Environment

------------------------------
- Operating System: `Linux`
- Node Version:     `v16.14.2`
- Nuxt Version:     `3.0.0-rc.1`
- Package Manager:  `npm@7.17.0`
- Builder:          `vite`
- User Config:      `-`
- Runtime Modules:  `-`
- Build Modules:    `-`
------------------------------

Reproduction

https://stackblitz.com/edit/github-yyumyt?file=pages/404.vue

Describe the bug

I have defined three pages (routes):

• car.vue
• [slug].vue
• 404.vue

If I go to http://.../hi => it loads [slug].vue => OK If I go to http://.../car => it loads car.vue => OK If I go to http://.../404 => it loads [slug].vue => FAIL

Additional context

No response

Logs

No response

[Aareksio]

I am positive the broad idea of this issue is to ask “how to handle 404 on dynamic path”.

  const $route = useRoute()
  const { data } = await useAsyncData(`product:${$route.params.id}`, () => $fetch(`/api/products/${$route.params.id}`))

  // TODO: Display proper 404 when accessing unknown product id

  // Requirements:
  // - Using default error page - big "404" with small "Page not found: /product/42" - just like native nuxt 404
  // - On all types of navigation:
  //   a) Home -> Product/42 (client)
  //   b) Home -> Product/42 -> Home -> Product/42 (client + cache)
  //   c) Product/42 (server)
  //   d) Product/42 -> Home -> Product/42 (server into client + cache)
  // - Proper status code and status message when SSR (404, Not Found)

There is currently no documentation on how to properly handle API’s 404 response in the docs. From my experience it is also extremely hard, as all of the 4 navigation types listed in comments above require different logic each.

---

Here is the repo reproduction in case you want to bootstrap the project: data-fetching

[danielroe]

Thanks for that link @Aareksio.

I’ve submitted a related PR to fix an issue, add some basic docs and improve DX (by avoiding import of createError), but check out https://stackblitz.com/edit/github-jwfbey. Does that answer your questions?