Custom error page from api response.

<script setup>
const { data, error } = await useFetch('/api/foo', {
  onResponseError({ request, response, options }) {
    throw createError({
      statusCode: response._data.statusCode,
      statusMessage: response._data.statusMessage,
    });
  },
});
</script>

<template>
  <div>
    <div>This is the home page</div>
    <pre>{{ data }}</pre>
  </div>
</template>

export default defineEventHandler((event) => {
  throw createError({
    statusCode: 400,
    statusMessage: 'Random Error Message',
  });
});

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

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

<template>
  <div>This is the error page</div>
  <div>Error Code: {{ error.statusCode }}</div>
  <div>Error Message: {{ error.statusMessege }}</div>
  <div><button @click="handleError">Go to the home page</button></div>
</template>