【Nuxt.js】404エラーとその他エラーで表示させるメッセージを変える方法

はじめに

こんにちは。
こちらの記事では、エラーが発生した際のメッセージを分ける方法を記しています。
誤っている点がございましたらコメントいただけると幸いです。

実装手順

1. エラーページの作成

プロジェクト直下のlayoutsディレクトリに、オリジナルのエラーページを作成できるerror.vueファイルを作成する。エラーが発生すると、ここで設定したページが表示される。

参考記事：https://nuxtjs.org/ja/docs/directory-structure/layouts

layouts/error.vue

<template>
  <div id="error">
    <div>
      <p>エラーが発生しました。</p>
      <nuxt-link to="/">ホームへ戻る</nuxt-link>
    </div>
  </div>
</template>

これで、エラーが発生した際はこのページを表示させるのですが、404エラーのときだけ表示を変更したいので、次のように実装します。

2. エラーメッセージの取得

propsを用いてエラー情報を受け取り、オブジェクトとして設定します。また、算出プロパティでエラーコードをstatusで呼び出せるようにしておきます。

layouts/error.vue

<script>
export default {
  props: {
    error: {
      type: Object,
      default: null
    }
  },
  computed: {
    status() {
      return this.error.statusCode;
    }
  }
};
</script>

エラーオブジェクトの中には、以下の値が含まれています。

値	説明
statusCode	エラーコードを取得（404 , 500など）
message	エラーメッセージを取得
path	エラーが発生したページのパスを取得

3. エラーメッセージの使い分け

404エラーとその他エラーで表示させるメッセージを変えらるよう、v-ifとv-elseを使用します。propsで取得したエラーコードも、マスタッシュ構文を使って表示させます。

layouts/error.vue

<template>
  <div id="error">
    <div>
      <p v-if="status === 404">URLにお間違いがないかご確認ください。</p>
      <p v-else>恐れ入りますが再度お試しください。</p>
      <p>{{ status }}エラー</p>
      <nuxt-link to="/">ホームへ戻る</nuxt-link>
    </div>
  </div>
</template>

このように、エラーコードによって表示させるメッセージを変えることができました。
（CSSは個別に設定してください）

参考記事：https://hafilog.com/nuxt-error-page

おわりに

ここまでエラーが発生した際のメッセージを分ける方法についてまとめました。
以上、最後まで読んでいただきありがとうございました！
よければLGTMを押してくれると嬉しいです！