Custom 404 Page in Nuxt

#vue #nuxt #nuxt3

How to create a custom Nuxt3 error page

NOTE: This solution is for projects using both the Layout and Page directory options in Nuxt and assumes you already have those directories set up.

If you want to skip right to the demo, see the Stackblitz here.

Step 1. First step is to create the 404 layout file inside the layout directory using the Nuxt CLI tool nuxi, as well at your error page at root.

npx nuxi add layout 404
touch error.vue

Note: please error.vue goes at root, not in pages

Step 2. Update your 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>

<script>
export default {
  methods: {
    goBack() {
      this.$router.push('/')
    }
  }
}
</script>

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

Notice, the NuxtLayout template accepts a prop allowing you to pass the name of your 404 page layout template.

Step 3. Style your layout by adding your navbar or whatever else is appropriate for your website.

Read more about Nuxt error handling here.

And if you want to learn more about NuxtLayout you can go here.

Again, you can visit the Stackblitz here: https://stackblitz.com/edit/nuxt3-custom-404?file=layouts%2F404.vue