error.vue
Display a consistent interface when an error reaches the Vue application.
Create app/error.vue to customize the application's error screen.
<!-- app/error.vue -->
<script setup lang="ts">
const { error, clearError } = useAppError();
</script>
<template>
<main>
<h1>An error occurred</h1>
<p>{{ error?.message }}</p>
<button type="button" @click="clearError()">Try again</button>
</main>
</template>Runable captures Vue errors passed to the application handler and exposes their state through useAppError(). Keep the error component robust: avoid reusing logic that may have caused the failure.
HTTP errors remain in the backend
error.vue concerns the Vue interface. An error produced by an API route must still be converted into an HTTP response by Express, Fastify, Hono, or your other backend.