Installation

Flare's Vue integration requires Vue 3 and uses two packages:

• @flareapp/js - the core Flare client that catches errors and sends them to Flare,
• @flareapp/vue - the Vue integration that provides a plugin and an error boundary component.

If you use Vue Router 4, flareVue will pick it up automatically and attach the current route to every report. Vue Router is declared as an optional peer dependency, so no extra install step is needed if you already have it.

Optionally, you can also use the sourcemap plugin (Vite/Webpack) for resolving bundled code.

Looking for the docs for V1 of the JavaScript SDK? Find them here.

The interactive guide above installs the packages, initializes the Flare client, connects your project key, and verifies your setup. The sections below cover the Vue-specific setup you should add on top.

Registering the flareVue plugin

Register the flareVue plugin on your app so every uncaught component error is reported to Flare:

import{flare}from'@flareapp/js';import{flareVue}from'@flareapp/vue';import{createApp}from'vue';importAppfrom'./App.vue';// Initialize Flare with the production guard from the guide aboveflare.light('YOUR PROJECT KEY');constapp=createApp(App);app.use(flareVue);app.mount('#app');

The plugin hooks into Vue's app.config.errorHandler and automatically attaches Vue-specific context to every report (component name, component hierarchy, error origin, and the current route when Vue Router is detected). You can learn more about the plugin and its options in the Error handling docs.

Wrapping your app in the error boundary

To display a fallback UI when something goes wrong, wrap your component tree with FlareErrorBoundary:

<scriptsetup>import{FlareErrorBoundary}from'@flareapp/vue';</script><template><FlareErrorBoundary><RouterView /><template#fallback><p>Something went wrong.</p></template></FlareErrorBoundary></template>

The boundary uses Vue's onErrorCaptured to catch errors from its descendants, reports them to Flare, and swaps in the fallback slot. You can use it alongside the plugin, and errors caught by a boundary are still reported exactly once.

You can learn more about the boundary and its options in the Error boundary docs.

Reporting errors, hooks and context

The Vue integration builds on top of the core JavaScript client. For features shared with the JavaScript client, see the JavaScript docs:

• Reporting errors
• Client hooks
• Adding custom context
• Adding glows

Important notes

• If flare.light() hasn't been called (e.g. in development when using the production guard), errors are silently ignored — the flareVue plugin still sets up the error handler, but flare.report() drops the reports. See the JavaScript installation docs for details.
• Errors in a development environment might not always be reported. To verify the Flare client is set up correctly, test with a production build.
• Vue warnings (via app.config.warnHandler) are only emitted in development builds. If you want to capture them, enable captureWarnings on the plugin. See Capturing Vue warnings for details.