共通のエラーページをカスタムする（error.vue）
Nuxt.jsにはデフォルトで共通のエラーページが用意されていますが、自分で用意したページを用意することも可能です。
目次
- デフォルトのエラーページ
- エラーページのカスタム（error.vue）
- 参考リンク
デフォルトのエラーページ
エラーページのカスタム（error.vue）
デフォルトで用意されているエラーページをカスタムするには、layouts 配下に error.vue ファイルを追加します。
ファイル名は「error.vue」固定です。
error.vueファイルのソースコード（例）は以下の通り。
<template>
<iv class="container">
<h1 v-if="error.statusCode === 404">ページが見つかりません</h1>
<h1 v-else>エラーが発生しました</h1>
<nuxt-link to="/">ホーム</nuxt-link>
</div>
</template>
<script>
export default {
props: ['error'],
layout: 'default-error'
}
</script>
プロパティ「layout」でエラーページ用のカスタムレイアウトを指定することができます。
layouts/default.vueの内容をコピーして、参照しているカスタムレイアウトが分かるようにしてエラーページを表示してみると以下の通り。
通常のエラーページの階層は以下の通りですが、
app.html（作成している場合） ＞ layouts/default.vue ＞ layouts/error.vue
これが「layout: 'default-error'」を指定した場合、以下のように変わります。
app.html（作成している場合） ＞ layouts/default-error.vue ＞ layouts/error.vue
通常のページとエラーページのレイアウトを変更したい場合に有効です。