From d0ae5851e4fe60937f1188dee29c8764eb212fef Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 20 Apr 2022 15:24:08 +0100
Subject: [PATCH] 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 | 4 ++++
 packages/nuxt/src/pages/runtime/router.ts              | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/docs/content/2.guide/3.directory-structure/10.pages.md b/docs/content/2.guide/3.directory-structure/10.pages.md
index 595059f9d5..d1eeea8a0f 100644
--- a/docs/content/2.guide/3.directory-structure/10.pages.md
+++ b/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>`.
diff --git a/packages/nuxt/src/pages/runtime/router.ts b/packages/nuxt/src/pages/runtime/router.ts
index 79fcbf15ed..9b3e6d6854 100644
--- a/packages/nuxt/src/pages/runtime/router.ts
+++ b/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
       }
     })