Nuxt.jsではウェブアプリケーションの他にも、コーポレートサイトやメディアサイトなどのウェブサイトを作成するのにも便利です。そんな時に必要となることが多い404エラーページですが、専用のページテンプレートを作成する方法をまとめておきたいと思います。

まずは404エラーページのテンプレートファイルを作成していきます。場所はpagesディレクトリ配下に設置します。今回は「404.vue」という名前で下記のように作成しています。

【pages/404.vue】

<template>
 <div>
  <h1>Page Not Found</h1>
  <h2>お探しのページが見つかりません</h2>
  <p>
   URLに間違いないか確認し、再度アクセスを試してください。
   また、つながらない場合は時間をおいて再度アクセスしてください。
  </p>
 </div>
</template>

<script></script>

これだけでは、404エラー時に先ほど作成したテンプレートが表示されません。続けて「nuxt.config.js」に、404エラー時のルーティングを設定する必要があります。具体的には「router」オプションで下記のように記述します。

【nuxt.config.js】※一部抜粋

export default {
 router: {
  extendRoutes (routes, resolve) {
   routes.push({
    name: '404error',
    path: '*',
    component: resolve('~/pages/404.vue')
   })
  }
 },
 ...........
}

extendRoutesメソッドで404エラー時の指定を行います。nameの値には識別できるようなキーワードを、componentには先ほど作成したテンプレートがある場所のパスを記述します。pathにはワイルドカードを指定することで、ルーティングに該当しないURLの場合には全てこのルーティングが実行されるようになっています。これで存在しないURLにアクセスすると、先ほど作成したテンプレートで404エラーページが表示されるようになりました。

今回はNuxt.jsで404エラーページを作成する方法についてまとめてみました。他にもいくつか方法があるようですが、公式のドキュメントに掲載されているやり方に沿っているので、安心して利用できるのかなと思います。是非試してみてはいかがでしょうか。

（参考にさせて頂いたサイト）
API: router プロパティ