👾

Nuxt3でエラーページをカスタマイズする

2022/05/13に公開
2

はじめに

  • Nuxt3でのエラーページのカスタマイズの仕方を記載します

動作環境

  • Node.js - 16.x
  • Yarn - 1.22.x

使用ライブラリ

  • nuxt - 3.0.0-rc.3

Nuxt3でのエラーページについて

https://nuxt.com/docs/getting-started/error-handling

  • 上記の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を指定しない場合、上記のような標準のエラーページが表示されます。

ソースコード一式

https://github.com/yasu-s/nuxt3-error/tree/demo

おわりに

  • Nuxt3でも簡単にエラーページの設定が出来ました。
  • Nuxt2から移植する場合は、細かな修正点があるのでご注意ください。

補足:404エラー専用ページをつくる

https://github.com/nuxt/framework/issues/2556

https://github.com/nuxt/framework/issues/2278

  • 404エラー専用ページを作成したい場合、pages/404.vueを配置することでも対応できます

下記の内容に仕様変更がされたようです。(2023/7/11追記。情報提供ありがとうございます。)

https://github.com/nuxt/framework/pull/8809

  • pages/404.vueの代わりにpages/[...slug].vue
  • pages/[...slug].vue内で以下の設定を行う
<script setup>
setResponseStatus(404)
</script>

参考URL

https://nuxt.com/

https://nuxt.com/docs/getting-started/error-handling

Discussion

ふぁぼんふぁぼん

404.vueのサポートはstableリリースの前に削除されたようです。
https://github.com/nuxt/framework/pull/8809

プルリクエストのコメントにも書いてありますが、404.vue[...slug].vueにリネームしてその中でsetResponseStatusを実行する必要がありました。

const event = useRequestEvent()
setResponseStatus(event, 404)
(や)(や)

そんな修正が入ったんですね。情報提供ありがとうございます。
内容更新しておきます。

ログインするとコメントできます