Nuxt.jsでエラーページの対応をする

Nuxt.jsでエラーページの設定をする方法をメモ。

サンプルコード

layoutsディレクトリにerror.vueというファイルを設置して対応できます。

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">404 not found</h1>
    <h1 v-else>An error occurred</h1>
    <NuxtLink to="/">Home page</NuxtLink>
  </div>
</template>

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

propsでerrorを受け取り、ステータスコードによって内容を変更することもできます。