アプリケーションのライフスパン中に、ランタイムで予期せぬエラーが発生することがあります。そのような場合、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="/">Go back home</NuxtLink>
  </div>
</template>

エラーページには単一のプロップ 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
  }
})