애플리케이션의 수명 동안, 런타임에 예기치 않게 에러가 발생할 수 있습니다. 이 경우, 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>

에러 페이지는 처리할 에러를 포함하는 단일 prop - error를 가집니다.

error 객체는 다음 필드를 제공합니다:

{
  statusCode: number
  fatal: boolean
  unhandled: boolean
  statusMessage?: string
  data?: unknown
  cause?: unknown
}

사용자 정의 필드가 있는 에러가 있는 경우, 이들은 손실됩니다; 대신 data에 할당해야 합니다:

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