👾

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

2022/05/13に公開約1,300字

はじめに

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

動作環境

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

使用ライブラリ

  • nuxt - 3.0.0-rc.3

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

https://v3.nuxtjs.org/guide/features/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を配置することでも対応できます

参考URL

https://v3.nuxtjs.org/

https://v3.nuxtjs.org/guide/features/error-handling/

Discussion

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