error.vue

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="/">Go back home</NuxtLink>
  </div>
</template>
「エラーページ」と呼ばれていますが、これはルートではなく、~/pagesディレクトリに配置すべきではありません。同様の理由から、このページ内でdefinePageMetaを使用すべきではありません。しかし、NuxtLayoutコンポーネントを使用し、レイアウトの名前を指定することで、エラーファイル内でレイアウトを使用することは可能です。

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