Nuxt 4のエラーハンドリングのプロパティの変更
Nuxt 4（v4.3以降）では、エラー処理に関するプロパティ名がFetch API / HTTP仕様に合わせる形で見直されました。
statusCode → status, statusMessage → statusText #34165
そのため、以下のようにstatusCodeやstatusMessageの使用が非推奨となっています。
error.vue
<script setup lang="ts">
interface Props {
error: {
statusCode?: string
statusMessage?: string
message?: string
stack?: string
};
}
defineProps<Props>()
const onBackClick = () => {
clearError({ redirect: '/' })
}
</script>
<template>
<h1>{{error.statusCode}}: {{error.statusMessage}}</h1>
<h2>{{error.message}}</h2>
<p>{{error.stack}}</p>
<button v-on:click="onBackClick">戻る</button>
</template>現在ではエラーの型として#appからNuxtErrorを使用し、error.statusおよびerror.statusTextでの取得が推奨されています。
error.vue
<script setup lang="ts">
import type { NuxtError } from '#app'
interface Props {
error: NuxtError
}
defineProps<Props>()
const onBackClick = () => {
clearError({ redirect: '/' })
}
</script>
<template>
<h1>{{error.status}}: {{error.statusText}}</h1>
<h2>{{error.message}}</h2>
<p>{{error.stack}}</p>
<button @click="onBackClick">戻る</button>
</template>2026年1月にバグ修正が行われましたが、現在も古い書き方をしているコードを見かけることがあるので、心当たりのある方は注意が必要です。
