【Nuxt.js v2】エラー発生時に自動でエラーページを表示する

エラーページを作成する

/layouts/error.vueを作成すると、エラーが発生したときに、自動でそのページが表示されるようになります。

error.vue

<template>
  <div>
    <p>ステータスコード：{{ error.statusCode }}</p>
    <p>メッセージ：{{ error.message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    error: {
      type: Object,
      default: null
    }
  }
}
</script>

試しに存在しないパスのページにアクセスしてみると、エラーページが表示されます。

ステータスコード：404
メッセージ：This page could not be found

注意

エラーページの自動表示は、クライアントサイドでのレンダリング中のみになります。
SSRモードのサーバーサイドレンダリング中に発生したエラーについては自動表示されないので注意が必要です。

サーバーサイドでのエラー時にエラーページを表示する

SSRモード時のmiddlewareやcreated内でのエラー発生時にエラーページを表示するためには、error()を使用します。
middleware,asyncData,fetchでは、引数のcontextからerrorを利用できます。

export default function ({ error }) {
    error({ statusCode: 500, message: 'サーバーエラー' })
}

createdでは、this.$nuxt.error()で使用できます。

created () {
  this.$nuxt.error({ statusCode: 500, message: 'サーバーエラー' })
}