How to create a custom Nuxt3 error page

Nuxt 3 is a powerful framework for building modern web applications using Vue.js. One essential aspect of any web application is handling errors gracefully. By default, Nuxt 3 provides a basic error page for common HTTP errors like 404 (Not Found) and 500 (Internal Server Error). However, customizing error pages to match the look and feel of your application can greatly enhance the user experience. In this article, we'll explore how to create a custom error page in Nuxt 3.

Step 1: Create the 404 Layout and Error Page Files

Use the Nuxt CLI tool nuxi to add a new layout specifically for handling 404 errors. You can do this by running the following command in your terminal:

npx nuxi add layout 404

This command creates a new layout file named 404.vue inside your layout directory.

Next, create an error page file named error.vue at the root of your Nuxt project. This file will serve as the template for your custom error page. Ensure it's placed at the root level, not within the page's directory.

Step 2: Update the Error Page Content

Open the error.vue file and add the necessary template markup. In this example, we're using a NuxtLayout component to specify the layout for the error page.

<template>
  <NuxtLayout name="404">
    <div>
      <div class="text-4xl">You've Arrived Here on Error, boss</div>
      <button class="font-bold button" @click="goBack">Back</button>
    </div>
  </NuxtLayout>
</template>

This code includes a message indicating that the user has arrived on the page due to an error and a button to navigate back.

Step 3: Style the Error Page

Customize the styling of your error page to match the design and branding of your website. You can add CSS within a scoped style block to ensure it only affects elements within the error page component.

<style scoped>
.button {
  padding: 4px 6px;
  margin: 10px 0px;
  background: black;
  color: white;
}
</style>

In this example, we've added styling for a button element.

Following these steps, you'll have created a custom error page in Nuxt 3 with a 404 layout and error.vue file that can be styled and customized to fit your project's requirements.