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.

Installing the packages

Install both the Flare client and the Vue integration:

npm install @flareapp/js @flareapp/vue
# or
yarn add @flareapp/js @flareapp/vue
# or
pnpm add @flareapp/js @flareapp/vue

Setting up the Flare client

Initialize the Flare client as early as possible in your application, typically in your main.js or main.ts file:

import { flare } from '@flareapp/js';

if (process.env.NODE_ENV === 'production') {
    flare.light('YOUR PROJECT PUBLIC KEY');
}

// When using Vite, use import.meta.env.PROD instead:
if (import.meta.env.PROD) {
    flare.light('YOUR PROJECT PUBLIC KEY');
}

Please make sure that you're using your project's public key. You can find it on the project settings page, in one of the JavaScript installation sections.

If you're using the sourcemap plugin, you don't need to specify a project public key here. The plugin will automatically hook up the flare.light() call to your project.

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';
import App from './App.vue';

// Don't forget your production guard from above
flare.light('YOUR PROJECT PUBLIC KEY');

const app = 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:

<script setup>
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.

Verifying your setup

The @flareapp/js client automatically assigns itself to window.flare, so you can interact with it from the browser console. To verify that Flare is correctly set up, build your app for production and run the following command in your browser console:

flare.test()

This will generate a test error that will show up on your project's dashboard in Flare.

If something goes wrong during the installation, enable debug mode by passing true as the second parameter: flare.light('key', true), or by calling flare.configure({ debug: true }).

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.