How to add custom error pages with Nuxt Js

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.