Custom Nuxt Error Page not rendering (always the default one) (Nuxt 3, Vue 3, Vite)

Question

I'm building a nuxt 3 app from scratch. I'm in the beginning and I've just created the error.vue next to app.vue. I have just one index.vue page in pages folder with hellow world.

My error-vue has the following code.

<template>
  <div>
    <h1>Dang</h1>
    <p>
      <strong>{{ error.message }}</strong>
    </p>
    <p>It looks like something broke.</p>
    <p>Sorry about that.</p>
  </div>
</template>

<script>
// const error = useError();
export default {
  props: {
    error: {
      type: Object,
      required: true,
    },
  },
};
</script>

When I navigate to a non existing page, thow, it shows me always the Default Nuxt 3 Error Page, and not my customized one.

Should I do anything further? Launch the error in middleware or plugins? I've tried to launch the throw createError({...}) in a plugin error-handler.js as the docs say, but it always shows the Default Error Page.

If not one has any idea, I believe the only option left would be doing manual redirections to a error.page inside pages.

Nuxt config goes like :

import svgLoader from "vite-svg-loader";

export default defineNuxtConfig({
  srcDir: "src/",
  components: [
    {
      path: "~/components",
      pathPrefix: false,
    },
  ],
  nitro: {
    routeRules: {
      "/": {
        headers: {
          "Cache-Control":
            "max-age=120, public, stale-while-revalidate=10, stale-if-error=3600",
          "Content-Language": "fr",
        },
      },
      "/_nuxt/": {
        headers: {
          "Cache-Control":
            "max-age=120, public, stale-while-revalidate=10, stale-if-error=3600",
          "Content-Language": "fr",
        },
      },
      "/**": {
        headers: {
          "Cache-Control":
            "max-age=600, public, stale-while-revalidate=10, stale-if-error=3600",
          "Content-Language": "fr",
        },
      },
      "/_nuxt/**": {
        headers: {
          "Cache-Control":
            "max-age=600, public, stale-while-revalidate=10, stale-if-error=3600",
          "Content-Language": "fr",
        },
      },
    },
  },
  modules: [
    "@bootstrap-vue-next/nuxt",
    "nuxt-jsonld",
    "@nuxtjs/i18n",
    "@nuxt/devtools",
    "@pinia/nuxt",
  ],
  vite: {
    plugins: [svgLoader()],
  },
  devtools: { enabled: true },
  app: {
    head: {
      ...  
    },
  },
  runtimeConfig: {
    public: {
      ... 
    },
    private: {
      ...
    },
  },
});