fix(nuxt): return 404 if hitting `404.vue` (#4460)

* fix(nuxt): return 404 if hitting `404.vue`

* docs: add info about `pages/404.vue`

docs/content/2.guide/3.directory-structure/10.pages.md

@@ -146,6 +146,10 @@ Navigating to `/hello/world` would render:
 <p>["hello", "world"]</p>
 ```
 
+::alert{type="info"}
+Nuxt also supports a custom `pages/404.vue` file which will handle all routes that are not otherwise matched (and set a 404 error code).
+::
+
 ## Nested Routes
 
 It is possible to display [nested routes](https://next.router.vuejs.org/guide/essentials/nested-routes.html) with `<NuxtPage>`.

packages/nuxt/src/pages/runtime/router.ts

@@ -161,6 +161,8 @@ export default defineNuxtPlugin((nuxtApp) => {
           statusCode: 404,
           statusMessage: `Page not found: ${to.fullPath}`
         })])
+      } else if (process.server && to.matched[0].name === '404' && nuxtApp.ssrContext) {
+        nuxtApp.ssrContext.res.statusCode = 404
       }
     })