# API reference


The Vue integration builds on top of the core JavaScript client. For the base API reference (method chaining, configuration, using the Flare class directly), see the [JavaScript API reference](/docs/javascript/reference/api).

`@flareapp/vue` ships two entry points: the package root and `/inject`. Unlike some other framework integrations, there are no separate subpaths for router tracing or component profiling. Both are options on `flareVue` itself, covered below.

## `@flareapp/vue`

```ts
import { FlareErrorBoundary, flareVue, DEFAULT_PROPS_DENYLIST } from '@flareapp/vue';
```

| Export | Description |
|--------|-------------|
| `flareVue` | Vue plugin that hooks into `app.config.errorHandler` and reports errors to Flare. Register it with `app.use(flareVue, options)`. Accepts an optional options object; see the table below. See [Error handling](/docs/vue/errors/error-handling) for details. |
| `FlareErrorBoundary` | Component that uses `onErrorCaptured` to catch errors from descendants and render a fallback slot. See [Error boundary](/docs/vue/errors/error-boundary) for details. |
| `DEFAULT_PROPS_DENYLIST` | The `RegExp` used by default to redact sensitive prop keys (see pattern below). Exported so you can compose your own denylist on top of it. |

Importing from the root also registers a default `flare` instance, the one from `@flareapp/js`, for `flareVue` and `FlareErrorBoundary` to fall back to when you don't pass a `flare` option or prop yourself. If you don't want that, for example outside a normal web page, use `/inject` instead.

The default denylist matches the following sensitive key patterns:

```
/password|passwd|pwd|token|secret|authorization|\bauth\b|bearer|oauth|credentials?|cookie|api[-_]?key|private[-_]?key|session|csrf|xsrf|\bpin\b|\bssn\b|card[-_]?number|\bcvv\b/i
```

### `FlareVueOptions`

Options passed as the second argument to `app.use(flareVue, options)`:

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `flare` | `Flare` | the default `@flareapp/js` instance | The `Flare` instance to report through. Set this when you're managing your own instance instead of the default singleton. |
| `router` | `Router` (vue-router; declared as `unknown` at the type level and checked at runtime, so TypeScript won't stop you from passing the wrong thing here) | - | A Vue Router instance. When set, `flareVue` names navigation and pageload spans after the matched route instead of the raw URL. See [tracing introduction](/docs/vue/tracing/introduction). |
| `profileComponents` | `boolean \| (string \| RegExp)[]` | - | Records a `browser_component` span per matched component mount. An array matches component names exactly (`string`) or by `test()` (`RegExp`). `true` profiles every named component, a debugging aid, not something to ship: a real page will hit `maxSpansPerTrace`, so the spans you actually want to see can end up past that limit, mixed in with spans for components you didn't mean to time. Requires `enableTracing`. See [profiling introduction](/docs/vue/profiling/introduction). |
| `captureWarnings` | `boolean` | `false` | Hook into `app.config.warnHandler` to report Vue warnings via `flare.reportMessage()`. Development-only, since Vue compiles warnings out of production builds. |
| `attachProps` | `boolean` | `false` | Attach the erroring component's props, plus each frame's props, to the report context. |
| `propsMaxDepth` | `number` | `2` | Depth limit used when serializing props. |
| `propsDenylist` | `RegExp` | `DEFAULT_PROPS_DENYLIST` | Keys matching this expression are redacted at every depth, in both props and route `params`/`query`. |
| `replaceDefaultDenylist` | `boolean` | `false` | When `true`, `propsDenylist` replaces the built-in denylist instead of extending it. |
| `beforeEvaluate` | `({ error, instance, info }) => void` | - | Called before the component hierarchy context is built. |
| `beforeSubmit` | `({ error, instance, info, context }) => FlareVueContext` | - | Called before submitting; must return a (possibly modified) context. |
| `afterSubmit` | `({ error, instance, info, context }) => void` | - | Called after `flare.report()` is called (the report is sent asynchronously). |

### TypeScript

```ts
import type {
    ComponentHierarchyFrame,
    ErrorOrigin,
    FlareErrorBoundaryFallbackProps,
    FlareErrorBoundaryHookParams,
    FlareVueContext,
    FlareVueOptions,
    FlareVueWarningContext,
    RouteContext,
    RouteParamValue,
    RouteQueryValue,
} from '@flareapp/vue';
```

| Type | Description |
|------|-------------|
| `ComponentHierarchyFrame` | One entry in `componentHierarchyFrames`: `component`, `file`, and optional `props`. |
| `ErrorOrigin` | Normalized category derived from Vue's `info` string: `"setup" \| "render" \| "lifecycle" \| "event" \| "watcher" \| "unknown"`. |
| `FlareErrorBoundaryFallbackProps` | Props passed to the `fallback` scoped slot (`error`, `componentHierarchy`, `componentHierarchyFrames`, `componentProps`, `resetErrorBoundary`). |
| `FlareErrorBoundaryHookParams` | Parameters shared by every lifecycle hook: `error`, `instance`, `info`. |
| `FlareVueContext` | Shape of the `context` object passed to `beforeSubmit` / `afterSubmit` and attached to the report. |
| `FlareVueOptions` | Options passed as the second argument to `app.use(flareVue, options)`, the table above. |
| `FlareVueWarningContext` | Shape of the context reported for Vue warnings when `captureWarnings` is enabled. |
| `RouteContext` | Route information attached to the report when Vue Router is detected. |
| `RouteParamValue` | `string \| string[]`, matches Vue Router's route-param shape, including repeated params. |
| `RouteQueryValue` | `string \| null`, individual query value, where `null` represents keys without a value (`?flag`). In `RouteContext.query`, values may also be `RouteQueryValue[]` for repeated keys (e.g. `?tag=a&tag=b`). |

## `@flareapp/vue/inject`

```ts
import { FlareErrorBoundary, flareVue, DEFAULT_PROPS_DENYLIST } from '@flareapp/vue/inject';
```

Exports the same `flareVue`, `FlareErrorBoundary`, and `DEFAULT_PROPS_DENYLIST` as the root package, with the same TypeScript types. The difference is what happens on import: `/inject` has no side effects and doesn't register a default `flare` instance. Every call needs an explicit `flare` option (on `flareVue`) or `flare` prop (on `FlareErrorBoundary`) instead of falling back to a default. Use this when you're embedding Flare's Vue integration somewhere that isn't a normal web page, for example a renderer process that already manages its own `Flare` instance.