NuxtJSのエラーページ(404 errorなど)を変更してみた

Table of Contents

Table of Contents

NuxtJSのデフォルトエラー画面をカスタマイズしたいため(特に404 not foundの表示)、変更する方法を試してみました。 そんなに手間がかからないので、方法をメモして、今後修正したい時に参考になると思います。



Contents

  • Error page
  • 自前のError pageに変更する
  • Netlifyでサイトを作成する場合
  • 最後


Error page

NuxtJS自体にデフォルトエラーページを用意しています。404500 エラーが発生する際に表示されます。 そのページの情報を確認したいので、ファイルの場所を探してみました。 最後に.nuxt/views/error.htmlというファイルを見つかりました。

<!DOCTYPE html>
<html>
<head>
<title>Server error</title>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name=viewport>
<style>
.__nuxt-error-page{padding: 1rem;background:#f7f8fb;color:#47494e;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-family:sans-serif;font-weight:100!important;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;position:absolute;top:0;left:0;right:0;bottom:0}.__nuxt-error-page .error{max-width:450px}.__nuxt-error-page .title{font-size:24px;font-size:1.5rem;margin-top:15px;color:#47494e;margin-bottom:8px}.__nuxt-error-page .description{color:#7f828b;line-height:21px;margin-bottom:10px}.__nuxt-error-page a{color:#7f828b!important;text-decoration:none}.__nuxt-error-page .logo{position:fixed;left:12px;bottom:12px}
</style>
</head>
<body>
  <div class="__nuxt-error-page">
    <div class="error">
        <svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" fill="#DBE1EC" viewBox="0 0 48 48"><path d="M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z"/></svg>
        <div class="title">Server error</div>
        <div class="description">{{ message }}</div>
    </div>
    <div class="logo">
      <a href="https://nuxtjs.org" target="_blank" rel="noopener">Nuxt.js</a>
    </div>
  </div>
</body>
</html>


自前のError pageに変更する

Error pageをカスタマイズしたい場合、layoutsの配下にerror.vueを追加します。 そうするとError pageの内容はerror.vueになりますので、あとはerror.vueを編集すれば自分のエラーページは完成です。

自分の場合下記のようにしました。

<template>
  <div class="error-page">
    <h1 class="message" v-if="error.statusCode === 404">Page not found</h1>
    <h1 class="message" v-else>An error occurred</h1>
    <div>
      <nuxt-link to="/">Go back to home page</nuxt-link>
    </div>
    <img src="/svg/7.svg" width="80%" height="80%">
  </div>
</template>

<script>

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

error.statusCodeを使って、404エラーその他エラー を分けます。

画像の部分はError404という素晴らしいサイトの素材を使用しています。 画像はSVG形式なので、調整しやすいですね。



Netlifyでサイトを作成する場合

サイトはNetlifyにホスティングしてもらっている場合、下記のようにnuxt.config.jsの編集は必要です。

export default {
  generate: {
    fallback: true
  }
}



最後

以上はError pageをカスタマイズする方法です。 公式サイトの内容も大変参考になりました。

方法自体は簡単なので、一回やってみたらすぐに覚えると思います。

これからもどんどん自分のサイトを進化していきたいです!