Configuration

This guide covers using @flareapp/vue inside an Electron renderer. If you haven't set up the core Electron client yet, start with how the Electron client works.

Same model as the React integration: the API key lives in main, reports travel over IPC, and the renderer injects Electron's Flare instance into Vue instead of letting it reach the @flareapp/js singleton.

Install

npm install @flareapp/electron @flareapp/vue

@flareapp/js comes in transitively via @flareapp/electron, so don't import it in the renderer.

1. Main process: owns the key and the transport

// main.ts
import { app } from 'electron';
import { flare } from '@flareapp/electron/main';

app.whenReady().then(() => {
    flare.light('YOUR PROJECT KEY'); // key lives ONLY here
});

2. Preload: bridges the renderer to main

// preload.ts
import { exposeFlare } from '@flareapp/electron/preload';

exposeFlare(); // exposes window.__flare.report() via contextBridge

Point your BrowserWindow at this preload with contextIsolation: true (the default).

3. Vue: report through the Electron instance

In the renderer, @flareapp/electron/renderer gives you a Flare instance that forwards every report to the main process over IPC. Hand that instance to Vue through @flareapp/vue/inject so Vue reports travel the same path. Two imports make this work:

• flare from @flareapp/electron/renderer is the IPC-forwarding instance (no API key, no direct network calls).
• flareVue (and FlareErrorBoundary) from @flareapp/vue/inject is a build that takes a flare instance instead of reaching for a global client.

Register the plugin in your renderer entry:

// main.ts (renderer entry)
import { createApp } from 'vue';
import { flareVue } from '@flareapp/vue/inject';
import { flare } from '@flareapp/electron/renderer';
import App from './App.vue';

const app = createApp(App);
app.use(flareVue, { flare });
app.mount('#app');

If you also use the component boundary, pass the same instance:

<script setup lang="ts">
import { FlareErrorBoundary } from '@flareapp/vue/inject';
import { flare } from '@flareapp/electron/renderer';
</script>

<template>
    <FlareErrorBoundary :flare="flare">
        <App />
    </FlareErrorBoundary>
</template>

If you import flare in several spots, re-export it from a small local module (e.g. renderer/flare.ts) and import it from there. That is optional sugar; the imports above work on their own.

Why the two special imports

In a normal web app, @flareapp/vue and @flareapp/js share one global Flare client: it holds your API key and posts reports straight to Flare. That is exactly what you want in a browser, and exactly what you do not want in an Electron renderer, where the key has to stay in the main process and reports have to go over IPC.

The /inject entry and the explicit flare instance are how you opt out of that web behavior:

• Import flareVue and the boundary from @flareapp/vue/inject, not @flareapp/vue. The regular entry quietly falls back to the global web client. The /inject entry has no global to fall back to, so it can only report through the instance you give it. (Import the regular entry by accident and Flare logs a console warning, so you can catch the mistake.)
• Don't import @flareapp/js anywhere in the renderer. It would start a second global error listener and try to send reports directly to Flare with no API key, bypassing the main process entirely.
• Always pass the flare instance. Forget it and Vue throws at install or component setup, the moment your app boots, not later when an error happens, so the mistake is obvious right away instead of silently dropping reports.

Once wired, reports from the renderer carry sdk = @flareapp/electron and framework = Vue. Your Vue context (context.custom.vue, the component hierarchy, props) gets included in the IPC call to the main process.