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?