【Nuxt】条件に沿ったエラーページを作成する

エラーページの作成

まずはじめに、Nuxt.jsにはデフォルトでエラーページが用意されています。ローカル開発環境を立ち上げ、適当なURLを入力し、表示を確認してみましょう。

現在表示されているのは404エラーページです。今回はこのエラーページをカスタマイズしていきたいと思います。

エラーページのカスタマイズを行うには、まずルートディレクトリにlayoutsディレクトリを作成し、その直下にerror.vueを作成します。

layouts/error.vue

<template>
  <div style="padding: 100px">
    <div>カスタムエラーページ</div>
  </div>
</template>

なんとこれだけでカスタマイズは完了です。先程404エラーページを確認したURLをもう一度入力し、表示を確認してみましょう。

error.vueの内容が表示されているかと思います。

条件によってコンテンツを出し分ける

１つのエラーページだけで十分なプロダクトはそうそうないと思います。ですので次は、エラーページを条件によって出し分けてみたいと思います。まず、このlayouts/error.vueにはerrorオブジェクトのpropsが渡されます。 errorオブジェクトの中にはstatusCodeとmessageとpathが含まれます。

layouts/error.vue

export default {
  props: {
    error: {
      type: Object,
      default: () => ({
        statusCode: null,
        message: null,
        path: null,
      }),
    },
  },
}

propsを設定するということは、何かしらの方法で値を渡す必要があります。 Vueコンポーネントから扱える$nuxtヘルパーや、asyncData・middleware・nuxtServerInitで扱うことができるcontextから呼び出すことができる、errorメソッドで値を渡し、エラーページのハンドリングを行います。その動きを確かめるためにまず、error.vueにstatusCodeとmessageとpathを表示させるtemplateを作成します。

layouts/error.vue

<template>
  <div style="padding: 100px">
    <div>カスタムエラーページ</div>
    <div>{{ error.statusCode }}</div>
    <div>{{ error.message }}</div>
    <div>{{ error.path }}</div>
  </div>
</template>

ではpages/index.vueにasyncDateを設定して、errorメソッドを呼び出してみましょう。

layouts/error.vue

export default {
  asyncData({ error }) {
    error({
      statusCode: 500,
      message: '500エラーページに遷移します',
      path: '/',
    })
  },
}

errorメソッドに渡した内容が画面に表示されていると思います。

今回は渡された内容をただ表示しただけですが、statusCodeやmessageの値を参照してコンポーネントを切り替えたりすれば、条件に応じたエラーページを表示することができます。

まとめ

エラーページの対応というのはそう多く行うことはないと思いますが、プロダクトによっては細かく出し分けを行う事もあるかと思います。 Nuxt.jsでそういった対応を行う際は是非参考にしてみてください。

TOC

エラーページの作成

条件によってコンテンツを出し分ける

まとめ