error.vue
Файл error.vue — это страница с ошибкой в приложении Nuxt.
В течение жизненного цикла вашего приложения, некоторые ошибки могут неожиданно появляться во время выполнения. В таком случае мы можем использовать файл error.vue, чтобы переопределить файлы ошибок по умолчанию и красиво отобразить ошибку.
error.vue
<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="/">Вернуться на домашнюю страницу</NuxtLink>
</div>
</template>
Хотя это называется «страницей ошибок», это не маршрут и его не следует размещать в директории
~/pages. По той же причине не следует использовать definePageMeta на этой странице. При этом вы все равно можете использовать лейауты в файле ошибок, используя компонент NuxtLayout и указав имя лейаута.Страница ошибок имеет единственный входной параметр - error, содержащий ошибку, которую нужно обработать.
Объект error предоставляет следующие поля:
{
statusCode: number
fatal: boolean
unhandled: boolean
statusMessage?: string
data?: unknown
cause?: unknown
}
Если у вас возникли ошибки с пользовательскими полями, они будут потеряны. Вместо этого вам следует присвоить их в data:
throw createError({
statusCode: 404,
statusMessage: 'Страница не найдена',
data: {
myCustomField: true
}
})