Skip to content

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 #error slot and no retry/reset/reporting story of its own — reach for <ErrorBoundary> from this package when you want resetKeys, maxRetries, retry counts, or a reporter attached at the component level.
  • error.vue handles 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 onErrorCaptured mechanism, 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:

ts
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:

ts
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:

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.