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を受け取り、ステータスコードによって内容を変更することもできます。

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2022年11月
 12345
6789101112
13141516171819
20212223242526
27282930