👾

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

2022/05/13に公開

2件

Nuxt

Nuxt 3

tech

はじめに

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

<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

https://nuxt.com/

Discussion

ふぁぼん

404.vueのサポートはstableリリースの前に削除されたようです。

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

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

（や）

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