Creating custom error pages

Every Nuxt app you install comes with a default error page stored inside the @nuxt package in the /node_modules/ directory that Nuxt uses to display errors, such as 404, 500, and so on. You can customize it by adding an error.vue file to the /layouts/ directory. Let's find out how you can achieve this with the following steps:

1. Create a custom error page, as follows, in the /layouts/ directory:

// layouts/error.vue
<template>
  <div>
    <h2 v-if="error.statusCode === 404">Page not found</h2>
    <h2 v-else>An error occurred</h2>
    <nuxt-link to="/">Home page</nuxt-link>
  </div>
</template>

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

Note that the error page is a page component. At first, it seems counter-intuitive and confusing as it is placed inside the /layouts/ directory instead of the /pages/ directory. However, it should be treated as a...