DEV Community

Cover image for Custom 404 Page in Nuxt
Michael Synan
Michael Synan

Posted on • Updated on

Custom 404 Page in Nuxt

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (4)

Collapse
 
c_b_d profile image
Carlota Dias

For me, just applying this to may app doesn't work, it always redirect to the defualt Nuxt 404 page, not the new one.

Collapse
 
otabek_abdiraimov profile image
Otabek

same here

Collapse
 
eagle_sniper_1657187691d8 profile image
Eagle Sniper

the path direction is not set

Collapse
 
floriani profile image
Sharp

If you have like me src folder as root folder you should move error.src there