当ブログに404ページを作った。

存在しないページにアクセスされた場合に表示される。

404page

やったこと

ほぼドキュメント通りのことをしただけ。

ビュー - Nuxt.js

layouts/error.vue

layoutsの下にerror.vueという名前のファイルを新しく作る。

下記のコードのようにすればステータスコードで分岐できるようなので、ついてでに他のエラー用のメッセージも用意しておいた。

<template>
  <div class="container">
    <div v-if="error.statusCode === 404">
      <h1>404 not found</h1>
      <p>お探しのページは見つかりませんでした。</p>
    </div>
    <div v-else>
      <h1>Error</h1>
      <p>エラーが発生しました。</p>
    </div>
    <nuxt-link to="/">Home</nuxt-link>
  </div>
</template>

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

nuxt.config.js

そのままnuxt generateをすると先ほど作ったページは200.htmlという名前で生成される。

Netlifyの場合は404.htmlという名前でルートフォルダに置いておく必要があるので、下のようにしておく。

generate: {
  fallback: true
}

API: generate プロパティ - Nuxt.js

これでdistに404.htmlが生成され、無事404ページを表示することができるようになった。