はじめに

layoutsディレクトリの配下にerror.vueを作成することでエラーページが作れる。
エラーページはページコンポーネントにエラーが発生した時に表示される（サーバーサイドレンダリング中には発生しない）
※エラーページはlayoutsディレクトリに配置されているが、レイアウトではなくページとして扱う。

layoutsディレクトリについてはこちら

今回は存在しないURLにアクセスがあった場合に表示するエラーページを作成していく。

layouts/error.vue

<template>
  <div class="ErrorPage">
    <div class="ErrorPage__content">
      <div class="ErrorPage__inner">
        // error.statusCodeでエラーコードを取得
        // エラーコードが404（アドレスのページが見つからない）だったら表示
        <template v-if="error.statusCode === 404">
          <span>ERROR</span>
          <h2>ページが見つかりません。</h2>
          <p>URLに間違いがないかご確認ください。</p>
          <nuxt-link to="/"> TOP</nuxt-link>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['error']
}
</script>

props

error.vueはpropsとしてerrorを受け取る。errorオブジェクトは下記の値を持つ。

message
型：String
エラーのメッセージが入る

path
型：String
エラーが発生したページのパスが入る

statusCode
型：Number
エラーコードが入る
statusCodeの状態によって表示するメッセージを切り替えることが可能。

エラーコード(HTTPステータスコード)

HTTPステータスコードとはWebサーバーからのレスポンスの結果を表す3桁の数字コードのこと。

ステータスコードの主なカテゴリと意味

100番台：情報

102　処理を継続中

200番台：成功

200　正しく表示されている

300番台：リダイレクション

302　一時的にページを転送
304　リソースが未更新

400番台：クライアントエラー

400　リクエストが不正
401　認証が必要
403　アクセス禁止
404　ページが見つからない
410　リクエストが消滅

500番台：サーバーエラー

500　サーバー内のエラー
503　サーバーが一時的に使用不可

動的ルーティングでのエラーページ（API通信なし）

pages/users/_id.vueのような動的なページにアクセスした際、idがundefindで500エラーが返ってきてしまった場合
500エラーを404エラーとしてエラーページに飛ばす。

UsersDetailPage.vue

<template>
  <!--  detailがあるか判別  -->
  <div v-if="detail">
    <h3>{{ detail.name }}</h3>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Users } from '@/types/interface.d';
import { users } from '@/data/users';

interface Data {
  detail: Users | undefined;
}

export default Vue.extend({
  name: 'UsersDetailPage',
  data(): Data {
    // id にルートのパラメータを代入
    const { id } = this.$route.params;
    // データ users の中から先ほど定義したidとusersのidが一致したオブジェクトをdetailに代入
    const detail: Users | undefined = users.find((_) => _.id === id);
    // 値がない場合、statusCode 404 としてエラーページに飛ばす
    if (!detail) {
      // errorメソッドでstatusCodeを指定してエラーページへ飛ばす
      this.$nuxt.error({
        statusCode: 404
      });
    }
    // 値があればdetailを返す
    return {
      detail
    };
  }
});
</script>

↑ data（）内でerrorメソッドを実行してエラーページに飛ばしているが、それと同時にtemplate内のレンダリングも始まっており、レンダリングの途中でdetailオブジェクトのキーがないとエラーが出て処理が止まってしまうので、最初にdetailがあるかないか判別（v-if="detail"）してあげる。

errorメソッド

errorメソッドを実行するとエラーレイアウトにリダイレクトされる。
引数として、statusCodeとmessageを渡すことができる。

sample.js

error({
  statusCode: 404,
  message: 'エラー 404'
})

【Nuxt】エラーページ作成