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オブジェクトは、次のフィールドを提供します。
{
statusCode: number
fatal: boolean
unhandled: boolean
statusMessage?: string
data?: unknown
cause?: unknown
}
カスタムフィールドを持つエラーがある場合、それらは失われます。代わりにdataに割り当てる必要があります。
throw createError({
statusCode: 404,
statusMessage: 'Page Not Found',
data: {
myCustomField: true
}
})