Custom error page in nuxt 3 application not working

In my pet project with Nuxt 3 v# 3.6.0 I can't set up custom error page.

In project, I have layouts (with default.vue) and pages (with index.vue) folders. Wherever I put the error.vue file, the system won't recognize it.

Accordingly to the documentation of Nuxt 3, the custom error page is supposed to be a file named error.vue in the root directory that receives an error object property, alogside app.vue page.

Maybe the problem of your project is that the app.vue page is missing.

The code of a simple error page could be:

• error.vue

<script setup>
const props = defineProps({
  error: Object,
  required: true,
});

const handleError = () => clearError({ redirect: '/' });
</script>

<template>
  <div>{{ error.statusCode }}</div>
  <div><button @click="handleError">Go to the home page</button></div>
</template>

See a working replication using nuxt@3.6.0.