Nuxt.jsで404エラーページを作成するサンプル

2022年3月9日

環境
Windows10 Home 64bit
node　v14.18.3
npm 6.14.15
Nuxt v2.15.8

エラーページを作成する手順
フォルダ：C:\test\layouts
ファイル名:error.vue

サンプルコード

<template>
 <div class="container">
    <h1>{{ error.statusCode }}</h1> 
    <h1 v-if="error.statusCode === 404">ページが見つかりません</h1>
    <h1 v-else>エラーが発生しました</h1>
    <nuxt-link to="/">トップページ</nuxt-link>
  </div>
</template>

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

実行結果
ブラウザより存在しないURLにアクセスすると404エラーページが表示されます。