Keeps one broken screen from taking the whole app down.
Import it from rei-kit:
import { ErrorBoundary } from 'rei-kit'
Open ErrorBoundary in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { RouterView } from 'vue-router'
import { BaseButton, ErrorBoundary } from 'rei-kit'
function report(cause: unknown) {
console.error(cause)
}
</script>
<template>
<ErrorBoundary @error="report">
<RouterView />
<template #fallback="{ reset }">
<p>That part of the page failed.</p>
<BaseButton @click="reset">Try again</BaseButton>
</template>
</ErrorBoundary>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
resetKey | string | number | Clears the error whenever it changes — a route path, usually. An error on one screen should not follow somebody to the next one, and without this the boundary stays broken until a full reload. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.