error.vue

Файл error.vue — страница отображения ошибок в приложении Nuxt.

В процессе работы приложения могут возникать необработанные ошибки. Файл error.vue позволяет заменить стандартную страницу ошибки и показывать её в нужном виде.

error.vue
<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps<{ error: NuxtError }>()
</script>

<template>
  <div>
    <h1>{{ error.status }}</h1>
    <NuxtLink to="/">Вернуться на главную</NuxtLink>
  </div>
</template>
Несмотря на название «страница ошибки», это не маршрут — файл не должен лежать в ~/pages. В нём не нужно использовать definePageMeta. При этом в error.vue можно использовать лейауты через компонент NuxtLayout, указав имя лейаута.

У страницы ошибки один проп — error, объект с данными об ошибке.

Поля объекта error:

interface NuxtError {
  status: number
  fatal: boolean
  unhandled: boolean
  statusText?: string
  data?: unknown
  cause?: unknown
  // устаревший эквивалент status
  statusCode: number
  // устаревший эквивалент statusText
  statusMessage?: string
}

Дополнительные поля при выбросе ошибки сохраняйте в data:

throw createError({
  status: 404,
  statusText: 'Page Not Found',
  data: {
    myCustomField: true,
  },
})