Debbie O'Brien

Posted on Apr 23, 2020 • Edited on Jun 13, 2020 • Originally published at debbie.codes

Creating an error page in Nuxt.js

#nuxt #vue

An error page is the page you see when you arrive at a page that can't be found. These are typically called 404 pages. To create an error page all you need to do is create an error.vue file in your layouts folder. Layouts? Yes, that is correct. Although the error page is a page, it must go inside the layouts folder.

In your error.vue page you can keep it simple by just adding a template with some text.

<template>
  <div>
    <p>OOOOPPPPPPS. No page found</p>
  </div>
</template>

Or you can print a message depending on the error status which you have access to by using error.statusCode.

<template>
  <div>
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
  </div>
</template>

Don't forget to add the error prop so you can use error.statusCode.

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

You can also add a layout to your error page just like you can do with any other page.

<script>
export default {
  layout: 'basic'
}
</script>

So as you can see it is really easy to add an error page yet it is something we normally forget todo. Error pages can also be fun so feel free to add some nice images and don't forget to link back to the home page to make it easier for your users if they end up on your error page.