Nuxt 3 The useError composable

The useError composable

                 ┌────────────────────────────┐
                 │      User visits a URL     │
                 └────────────┬───────────────┘
                              │
                              ▼
        ┌────────────────────────────────────────┐
        │   An error occurs (404, 403, 400, etc) │
        └────────────────┬───────────────────────┘
                         │
                         ▼
       ┌───────────────────────────────────────────────┐
       │ Nuxt renders the custom error.vue file        │
       │ (e.g., /error.vue inside your pages/ folder)  │
       └────────────────┬──────────────────────────────┘
                        │
                        ▼
┌────────────────────────────────────────────────────────────────────┐
│ Old Approach (Bad)                                                 │
│ ───────────────────────────────────────────────────────────────── │
│  Static content:                                                 │
│    <h1>404</h1>                                                    │
│    <p>Page Not Found</p>                                           │
│ ─ Always shows this, even if error is 403, 500, etc.               │
└────────────────────────────────────────────────────────────────────┘
                        │
                        ▼
┌────────────────────────────────────────────────────────────────────┐
│ New Approach (Good)                                                │
│ ───────────────────────────────────────────────────────────────── │
│ Dynamic content using Nuxt's `useError()` composable:           │
│                                                                    │
│ <script setup>                                                     │
│   const error = useError()                                         │
│ </script>                                                          │
│                                                                    │
│ <template>                                                         │
│   <h1>{{ error.statusCode }}</h1>                                  │
│   <p>{{ error.message }}</p>                                       │
│ </template>                                                        │
│ ─ This will adapt based on the actual error type.                  │
└────────────────────────────────────────────────────────────────────┘
                        │
                        ▼
           ┌───────────────────────────────────┐
           │ Shows:                            │
           │ - 404 → Page Not Found            │
           │ - 403 → Forbidden                 │
           │ - 500 → Server Error              │
           └───────────────────────────────────┘

Summary:
Previously, the error page was static – it always showed a generic 404.

Using useError(), you can access the actual error.statusCode and error.message.

This makes the error page dynamic, reusable for any type of error (403, 404, 500, etc.).