From 979ee466c10f0be106dd73cf1ab5bf864ee8ee6d Mon Sep 17 00:00:00 2001
From: Michael Brevard <yonshi29@gmail.com>
Date: Tue, 23 Jan 2024 18:02:40 +0200
Subject: [PATCH] docs: add separate docs page for `error.vue` (#25320)

---
 docs/1.getting-started/8.error-handling.md    | 30 +----------
 docs/2.guide/2.directory-structure/3.error.md | 53 +++++++++++++++++++
 2 files changed, 55 insertions(+), 28 deletions(-)
 create mode 100644 docs/2.guide/2.directory-structure/3.error.md

diff --git a/docs/1.getting-started/8.error-handling.md b/docs/1.getting-started/8.error-handling.md
index c5e026f50c..b6067c6593 100644
--- a/docs/1.getting-started/8.error-handling.md
+++ b/docs/1.getting-started/8.error-handling.md
@@ -101,36 +101,10 @@ const handleError = () => clearError({ redirect: '/' })
 </template>
 ```
 
-::callout
-Although it is called an 'error page' it's not a route and shouldn't be placed in your `~/pages` directory. For the same reason, you shouldn't use `definePageMeta` within this page.
+::read-more{to="/docs/guide/directory-structure/error"}
+Read more about `error.vue` and its uses.
 ::
 
-The error page has a single prop - `error` which contains an error for you to handle.
-
-The `error` object provides the fields:
-```ts
-{
-  url: string
-  statusCode: number
-  statusMessage: string
-  message: string
-  description: string
-  data: any
-}
-```
-
-If you have an error with custom fields they will be lost; you should assign them to `data` instead:
-
-```ts
-throw createError({
-  statusCode: 404,
-  statusMessage: 'Page Not Found',
-  data: {
-    myCustomField: true
-  }
-})
-```
-
 For custom errors we highly recommend to use `onErrorCaptured` composable that can be called in a page/component setup function or `vue:error` runtime nuxt hook that can be configured in a nuxt plugin.
 
 ```ts [plugins/error-handler.ts]
diff --git a/docs/2.guide/2.directory-structure/3.error.md b/docs/2.guide/2.directory-structure/3.error.md
new file mode 100644
index 0000000000..ade92b7179
--- /dev/null
+++ b/docs/2.guide/2.directory-structure/3.error.md
@@ -0,0 +1,53 @@
+---
+title: "error.vue"
+description: "The error.vue file is the error page in your Nuxt application."
+head.title: "error.vue"
+navigation.icon: i-ph-file-duotone
+---
+
+During the lifespan of your application, some errors may appear unexpectedly at runtime. In such case, we can use the `error.vue` file to override the default error files and display the error nicely.
+
+```vue [error.vue]
+<script setup lang="ts">
+const props = defineProps({
+  error: Object
+})
+</script>
+
+<template>
+  <div>
+    <h1>{{ error.statusCode }}</h1>
+    <NuxtLink to="/">Go back home</NuxtLink>
+  </div>
+</template>
+```
+
+::callout
+Although it is called an 'error page' it's not a route and shouldn't be placed in your `~/pages` directory. For the same reason, you shouldn't use `definePageMeta` within this page.
+::
+
+The error page has a single prop - `error` which contains an error for you to handle.
+
+The `error` object provides the following fields:
+```ts
+{
+  url: string
+  statusCode: number
+  statusMessage: string
+  message: string
+  description: string
+  data: any
+}
+```
+
+If you have an error with custom fields they will be lost; you should assign them to `data` instead:
+
+```ts
+throw createError({
+  statusCode: 404,
+  statusMessage: 'Page Not Found',
+  data: {
+    myCustomField: true
+  }
+})
+```