Nuxt3 default error page can't be overwritten with layouts/error.vue

user_13836441 0
Viewed 496

I have created a layouts/error.vue file that I'd like to use as my error page in my Nuxt3 app.

But for some reason, the default error page keeps loading up every time.

This is the default error page:default nuxt3 error page

This is the code I have in my error.vue file:

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <NuxtLink to="/">Home page</NuxtLink>
  </div>
</template>

<script>
export default {
  props: ["error"],
};
</script>

Every developer I have seen so far or read the docs explains this as a pretty simple thing to do by creating a folder and a file, so this might have to do something with my setup tho.

Anyway, could any of you point me to the right direction here please?

nuxt3 vuejs3 tailwind-css vue.js javascript
1 Answers

You created error file in layouts folder which stands for Nuxt version 2.

For Nuxt 3 you need to keep it next to app.vue file in your root folder. As documentation says:

You can customize this error page by adding ~/error.vue in the source directory of your application, alongside app.vue. This page has a single prop - error which contains an error for you to handle.

user_98337630
Related