【Nuxt.js】サーバーエラー時のエラーページを作成する
Nuxt.jsで存在しないURLにアクセスされた時やエラーが発生した時に、専用のエラーページを表示する機能があるようなので試してみます。
この記事の対象者
-
Nuxt.jsの初心者
-
Nuxtでオリジナルのエラーページを作りたい
今回やること
基本的には手順も一つだけで、Nuxt.js上でlayoutsディレクトリにerror.vueを作成するだけです。
layouts/error.vueファイルを追加することでエラーページをカスタマイズすることができます
実際にエラーページ作成
Nuxt.jsのプロジェクト上で layouts/error.vueを作成します。
props で error オブジェクトを受けとることでエラーコードなどを受け取ることが可能になります。
layouts/error.vue
<template>
<div class="error-box">
<h1>{{error.statusCode}}</h1>
<p v-if="error.statusCode === 404">Page not found</p>
<p v-else>Error</p>
<div class="buttons">
<div class="links">
<a onclick="history.back(-1)" class="link-button">Go Back</a>
<nuxt-link to="/" class="link-button">Go to Top</nuxt-link>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["error"],
};
</script>
<style>
.error-box {
margin-top: 200px;
color: #000000;
font-weight: 300;
text-align: center;
}
.error-box h1 {
font-size: 70px;
line-height: 46px;
margin-bottom: 20px;
}
.error-box p {
font-size: 40px;
line-height: 46px;
margin: 20px;
}
.buttons .links {
margin: 50px;
}
.buttons .links .link-button {
background: #4ae2c1;
padding: 10px 25px;
margin: 10px;
border-radius: 4px;
color: #ffffff;
font-weight: bold;
transition: all 0.3s linear;
cursor: pointer;
text-decoration: none;
}
.buttons .links a:hover {
background: #18be9a;
}
</style>
ブラウザから存在しないURLにアクセスすると、ページが見つからないので、 statusCode には ４０４ が入るので、下記の画面が表示されます。
別のエラーの場合はErrorという表示が出ます。
まとめ
今回は簡単にエラーページを作成することができました。 引き続きNuxt.jsなど学んだことをまとめていこうと思います。
