Any reason why the Nuxt error page wouldn't show? | Nuxt | Page 1

I'm trying to understand that when I get a Vue Router warning that there is no match found for location with path name, I'm not seeing my ~/error.vue component rendered on the screen. What would cause this?

The error page in question:

// ~/error.vue (project root, next to app.vue)
<script setup lang="ts">
import type { NuxtError } from '#app';

defineProps({
  error: Object as () => NuxtError
});

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

<template>
  <NuxtLayout>
    <div class="prose" v-if="error">
      <template v-if="error.statusCode === 404">
        <h1>404!</h1>
        <p>Sorry, that page doesn't exist.</p>
      </template>
      <template v-else>
        <h1>Dang</h1>
        <p>
          <strong>{{ error.message }}</strong>
        </p>
        <p>It looks like something broke.</p>
        <p>Sorry about that.</p>
      </template>
      <p>
        Go back to your
        <a @click="handleError">
          dashboard.
        </a>
      </p>
    </div>
  </NuxtLayout>
</template>

With NuxtLayout as the root element:

#Any reason why the Nuxt error page wouldn't show?