👾
Nuxt3でエラーページをカスタマイズする
はじめに
- Nuxt3でのエラーページのカスタマイズの仕方を記載します
動作環境
- Node.js - 16.x
- Yarn - 1.22.x
使用ライブラリ
- nuxt - 3.0.0-rc.3
Nuxt3でのエラーページについて
- 上記のURLに詳細は記載してあります。
- Nuxt2時代は
layouts/error.vueに記述していましたが、Nuxt3では./error.vueにエラーページの内容を記述します。 - また、
useErrorを使用することでエラー内容を取得できます。
サンプルコード
error.vue
error.vue
<script setup lang="ts">
const error = useError()
</script>
<template>
<div>
<ul>
<li>{{ error.statusCode }}</li>
<li>{{ error.message }}</li>
</ul>
</div>
</template>
-
error.vueに他のコンポーネントと同様にレイアウトや実装を記載します -
useError()経由でエラー情報を取得して画面に表示してみます
動作確認
yarn dev
標準のエラーページ
- error.vueを指定しない場合、上記のような標準のエラーページが表示されます。
ソースコード一式
おわりに
- Nuxt3でも簡単にエラーページの設定が出来ました。
- Nuxt2から移植する場合は、細かな修正点があるのでご注意ください。
補足：404エラー専用ページをつくる
404エラー専用ページを作成したい場合、pages/404.vueを配置することでも対応できます
下記の内容に仕様変更がされたようです。（2023/7/11追記。情報提供ありがとうございます。）
-
pages/404.vueの代わりにpages/[...slug].vue -
pages/[...slug].vue内で以下の設定を行う
<script setup>
setResponseStatus(404)
</script>
参考URL
Discussion
404.vueのサポートはstableリリースの前に削除されたようです。プルリクエストのコメントにも書いてありますが、
404.vueを[...slug].vueにリネームしてその中でsetResponseStatusを実行する必要がありました。そんな修正が入ったんですね。情報提供ありがとうございます。
内容更新しておきます。