Nuxt3 默认错误页面无法用 layouts/error.vue 覆盖

Question

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:

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?

Answer 1

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.