error.vue

Nuxt 애플리케이션에서 error.vue 파일은 에러 페이지입니다.

애플리케이션의 수명 동안 런타임에 예기치 않게 에러가 발생할 수 있습니다. 이런 경우 error.vue 파일을 사용해 기본 에러 파일을 오버라이드하고 에러를 보기 좋게 표시할 수 있습니다.

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

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

<template>
  <div>
    <h1>{{ error.statusCode }}</h1>
    <NuxtLink to="/">Go back home</NuxtLink>
  </div>
</template>
'에러 페이지'라고 불리지만, 이는 라우트가 아니며 ~/pages 디렉터리에 두면 안 됩니다. 같은 이유로, 이 페이지 안에서는 definePageMeta를 사용하면 안 됩니다. 그렇긴 하지만, NuxtLayout 컴포넌트를 활용하고 레이아웃 이름을 지정하여 에러 파일에서도 레이아웃을 사용할 수 있습니다.

에러 페이지에는 처리해야 할 에러를 담고 있는 단일 prop - error가 있습니다.

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

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

커스텀 필드가 있는 에러가 있다면, 그 필드들은 손실됩니다. 대신 data에 할당해야 합니다:

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