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
Top comments (4)
For me, just applying this to may app doesn't work, it always redirect to the defualt Nuxt 404 page, not the new one.
same here
the path direction is not set
If you have like me src folder as root folder you should move error.src there