Home / Tutorials / How to add custom error pages with Nuxt Js
How to add custom error pages with Nuxt Js cover

How to add custom error pages with Nuxt Js

Learn how to add custom error pages (404, 500 and etc) for your Nuxt Js application

6 mins

3K

3 years ago

0 comments

Average

Error pages are very important to have and to add them to your Nuxt Js application, it's very straightforward and easy to implement. What we essentially need is an "error.vue" file inside the layouts folder and the code should be as follow.

Error template

<template>
  <div>
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else-if="error.statusCode === 500">Internal Server error</h1>
    <h1 v-else>An error occurred</h1>
    <NuxtLink to="/">Home page</NuxtLink>
  </div>
</template>

<script>
  export default {
    props: ['error'],
    // layout: 'error' // you can set a custom layout for the error page
  }
</script>
The code above should be named "error.vue" and this is a special template that Nuxt has set and it will accept a prop with error as its name. To know more of the available properties, do console log the error object or refer to this documentation of Nuxt Error Page section.
notion avatar

Alaz

Week-end developer currently experimenting with web, mobile, and all things programming.

Support Us

If you like our tutorial, support us by being our Patreon or buy us some coffee ☕️

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this