Nuxt.js

【Nuxt.js】サーバーエラー時のエラーページを作成する

【Nuxt.js】サーバーエラー時のエラーページを作成する

Nuxt.jsで存在しないURLにアクセスされた時やエラーが発生した時に、専用のエラーページを表示する機能があるようなので試してみます。

ビュー - Nuxt.js

この記事の対象者

  • 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 には 404 が入るので、下記の画面が表示されます。

別のエラーの場合はErrorという表示が出ます。

まとめ

今回は簡単にエラーページを作成することができました。 引き続きNuxt.jsなど学んだことをまとめていこうと思います。

最近の投稿