Posts Learn Components Snippets Categories Tags Tools new About
/

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

1 year ago

6 mins read

160 views

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.

Alternative Tags

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

Load comments for How to add custom error pages with Nuxt Js

new

PostSrc Code Snippets

Learn new snippets today, level up your Laravel, Alpine JS, Vue JS, Tailwind CSS skills and more.

Learn New Snippets
new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that are right for your project.

View Components
)