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

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

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

サンプルコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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エラーページが表示されます。

Nuxt.js

Posted by arkgame