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
  }
})

app.config.ts

Предоставьте доступ к реактивной конфигурации в приложении с помощью конфигурационного файла приложения.

nuxt.config.ts

Nuxt можно легко настроить с помощью одного файла nuxt.config.