error.vue
El archivo error.vue es la página de error en tu aplicación Nuxt.
Durante la vida útil de tu aplicación, pueden aparecer algunos errores inesperadamente en tiempo de ejecución. En tal caso, podemos usar el archivo error.vue para sobrescribir los archivos de error predeterminados y mostrar el error de manera agradable.
<script setup lang="ts">
import type { NuxtError } from '#app'
const props = defineProps({
error: Object as () => NuxtError
})
</script>
<template>
<div>
<h1>{{ error.statusCode }}</h1>
<NuxtLink to="/">Volver a inicio</NuxtLink>
</div>
</template>
Aunque se llama 'página de error', no es una ruta y no debería colocarse en tu directorio ~/pages. Por la misma razón, no deberías usar definePageMeta dentro de esta página. Dicho esto, aún puedes usar layouts en el archivo de error, utilizando el componente NuxtLayout y especificando el nombre del layout.
La página de error tiene una única prop - error que contiene un error para que lo manejes.
El objeto error proporciona los siguientes campos:
{
statusCode: number
fatal: boolean
unhandled: boolean
statusMessage?: string
data?: unknown
cause?: unknown
}
Si tienes un error con campos personalizados, se perderán; deberías asignarlos a data en su lugar:
throw createError({
statusCode: 404,
statusMessage: 'Page Not Found',
data: {
myCustomField: true
}
})
※Esta página es una traducción no oficial de la documentación oficial de Nuxt.js.
La página correspondiente en la documentación oficial está aquí:
https://nuxt.com/docs/3.x/guide/directory-structure/error