Nuxt
Nuxt ships its own <NuxtErrorBoundary> (wrapping onErrorCaptured) and the error.vue page for whole-app errors. This package is complementary, not a replacement:
<NuxtErrorBoundary>is a thin, single-purpose wrapper with an#errorslot and no retry/reset/reporting story of its own — reach for<ErrorBoundary>from this package when you wantresetKeys,maxRetries, retry counts, or a reporter attached at the component level.error.vuehandles errors that reach the app root (including ones a component-level boundary chose not to isolate, or that happened before any boundary mounted). Keep it as your last line of defense; use<ErrorBoundary>for the parts of the tree that should degrade gracefully instead of taking down the page.- Both rely on the same underlying
onErrorCapturedmechanism, so the same catch/no-catch list applies either way.
The vue-error-boundary-kit/nuxt module
Add it to nuxt.config.ts for auto-registration — no manual imports needed in your app code:
export default defineNuxtConfig({
modules: ['vue-error-boundary-kit/nuxt'],
})This registers <ErrorBoundary> as a global component and auto-imports useErrorBoundary, useGlobalErrorCapture, and useNuxtErrorBoundary (below) — verified end-to-end against a real Nuxt 4.5.2 app built from the published package tarball, including that nuxt.config.ts's module-options typing actually catches a wrong-shaped option.
Options
Both default true, under the errorBoundaryKit key:
export default defineNuxtConfig({
modules: ['vue-error-boundary-kit/nuxt'],
errorBoundaryKit: {
component: true, // register <ErrorBoundary> globally
autoImports: true, // auto-import the three composables above
},
})component
boolean · default: true
Register <ErrorBoundary> as a global component.
autoImports
boolean · default: true
Auto-import useErrorBoundary, useGlobalErrorCapture, and useNuxtErrorBoundary.
@nuxt/kit is only a peer dependency of this package (peerDependenciesMeta.optional), never bundled into your app — it's already part of any Nuxt install, so there's nothing extra to add. Tested against Nuxt 4.5.2; the module's declared compatibility: { nuxt: '>=3.0.0' } is reasoned from @nuxt/kit's own cross-major (2/3/4) design rather than independently re-verified against Nuxt 3.
useNuxtErrorBoundary()
useErrorBoundary(), plus Nuxt's own vue:error and app:error hooks wired in — i.e. it also catches what escapes every <ErrorBoundary> in your tree (a render/setup error that reached the app root uncaught) and Nuxt's own showError()/createError() fatal-error flow, neither of which a component-level boundary ever sees. Both hooks run isomorphically, so this covers SSR and the client alike. Typically called once, e.g. in app.vue:
<!-- app.vue -->
<script setup lang="ts">
const { error } = useNuxtErrorBoundary({ reporter: sentryReporter })
</script>
<template>
<ErrorBoundary :reporter="sentryReporter">
<NuxtPage />
</ErrorBoundary>
</template>For errors you want the framework's own error.vue to handle (e.g. 404s from createError()), don't wrap them in a local boundary — let them propagate.