fix(nuxt): allow customising status code in validate method (#28612)

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

@@ -12,13 +12,10 @@ export default defineNuxtRouteMiddleware(async (to) => {
   if (result === true) {
     return
   }
-  if (import.meta.server) {
-    return result
-  }
 
   const error = createError({
-    statusCode: 404,
-    statusMessage: `Page Not Found: ${to.fullPath}`,
+    statusCode: (result && result.statusCode) || 404,
+    statusMessage: (result && result.statusMessage) || `Page Not Found: ${to.fullPath}`,
     data: {
       path: to.fullPath,
     },
@@ -32,7 +29,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
         // We pretend to have navigated to the invalid route so
         // that the user can return to the previous page with
         // the back button.
-        window.history.pushState({}, '', to.fullPath)
+        window?.history.pushState({}, '', to.fullPath)
       })
       // We stop the navigation immediately before it resolves
       // if there is no other route matching it.

test/basic.test.ts

@@ -207,6 +207,45 @@ describe('pages', () => {
     await page.close()
   })
 
+  it('validates routes with custom statusCode and statusMessage', async () => {
+    const CUSTOM_ERROR_CODE = 401
+    const CUSTOM_ERROR_MESSAGE = 'Custom error message'
+    const ERROR_PAGE_TEXT = 'This is the error page'
+    const PAGE_TEXT = 'You should not see this'
+
+    // Check status code and message on fetch
+    const res = await fetch('/validate-custom-error')
+    const serverText = await res.text()
+
+    expect(res.status).toEqual(CUSTOM_ERROR_CODE)
+    expect(serverText).toContain(CUSTOM_ERROR_MESSAGE)
+    expect(serverText).not.toContain(PAGE_TEXT)
+
+    // Client-side navigation
+    const { page } = await renderPage('/navigate-to-validate-custom-error')
+    await page.getByText('should throw a 401 error with custom message').click()
+    // error.vue has an h1 tag
+    await page.waitForSelector('h1')
+
+    const clientText = await page.innerText('body')
+
+    expect(clientText).toContain(CUSTOM_ERROR_MESSAGE)
+    expect(clientText).toContain(ERROR_PAGE_TEXT)
+    expect(clientText).not.toContain(PAGE_TEXT)
+
+    await page.close()
+
+    // Server-side navigation
+    const { page: serverPage } = await renderPage('/validate-custom-error')
+    const serverPageText = await serverPage.innerText('body')
+
+    expect(serverPageText).toContain(CUSTOM_ERROR_MESSAGE)
+    expect(serverPageText).toContain(ERROR_PAGE_TEXT)
+    expect(serverPageText).not.toContain(PAGE_TEXT)
+
+    await serverPage.close()
+  })
+
   it('returns 500 when there is an infinite redirect', async () => {
     const { status } = await fetch('/redirect-infinite', { redirect: 'manual' })
     expect(status).toEqual(500)

test/fixtures/basic/pages/navigate-to-validate-custom-error.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <div>navigate-to-validate-custom-error.vue</div>
+    <NuxtLink to="/validate-custom-error">
+      should throw a 401 error with custom message
+    </NuxtLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  middleware: ['override'],
+})
+</script>

test/fixtures/basic/pages/validate-custom-error.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>You should not see this</div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  validate: to => ({
+    statusCode: 401,
+    statusMessage: 'Custom error message',
+  }),
+})
+</script>