# Install and wire the InsightRecorder Vue adapter

Paste this into a coding agent (Claude Code, Cursor, …) running inside your Vue
application's repository. It is self-contained — the agent needs no prior
knowledge of InsightRecorder.

---

You are working in a Vue application. Wire it to InsightRecorder so a crash files a
bug report with the console, network and click timeline that led to it.

**Context you need:**

- InsightRecorder's browser agent (`capture.js`) records console output, network
  calls and user steps in memory and transmits nothing until a report is
  triggered. It is loaded with a `<script>` tag and a public capture token.
- The agent alone is not enough for Vue: component errors go to
  **`app.config.errorHandler`** and never reach `window.onerror`. The
  `@insightrecorder/capture-vue` plugin bridges that and attaches the component name
  and the failing lifecycle hook.
- The capture token is public by design, like an error-tracker DSN. It is
  **not** an API key and carries no scopes. Find it in the InsightRecorder UI under
  *Settings → Integrations*.

**Steps:**

1. Add the agent script to the HTML document that boots the app — `index.html`
   for Vite, or Nuxt's `app.head` configuration:

   ```html
   <script src="https://<insightrecorder-host>/static/js/capture.js"
           data-token="<capture token>"></script>
   ```

   Read the host and token from the project's existing environment mechanism
   (`import.meta.env`, `runtimeConfig`) rather than hard-coding them. If either
   is missing, the tag must be omitted and the app must run normally —
   telemetry is never a boot dependency.

2. Install the plugin: `npm install @insightrecorder/capture-vue` (or the
   yarn/pnpm equivalent this project uses).

3. Install it on the app where the other plugins are registered (`main.ts`, or
   a Nuxt plugin file), passing the router if the project has one:

   ```js
   import { InsightRecorderCapture } from "@insightrecorder/capture-vue";

   app.use(InsightRecorderCapture, { router });
   ```

   The plugin chains onto an existing `app.config.errorHandler`, so if this
   project already sets one, leave it in place — do not merge them by hand.

4. Where a component should fail on its own rather than taking the page with it,
   add an `onErrorCaptured` hook that calls `reportVueError(error, instance,
   hook)` and returns `false`. Only do this where the project's layout makes it
   meaningful.

**Rules — do not violate these:**

- Do **not** capture props, state, refs, form values, headers, cookies or
  request bodies in any report you write. They routinely carry credentials and
  personal data, and the SDK deliberately never reads them.
- Do **not** put the capture token in a server-side secret store or an API-key
  variable — it belongs in the page, and treating it as a secret will just make
  the wiring wrong.
- Do **not** make the app's boot depend on the agent loading. Every plugin
  entry point is already a no-op when the agent is absent; keep it that way.
- Do **not** replace the project's existing error reporting (Sentry, etc.)
  unless you were asked to. Both can run.

**Verify before you finish:**

1. The project's build and test commands pass.
2. Run the app, throw a deliberate error inside a component's `setup` or
   render, and confirm a bug appears in InsightRecorder at `/app/bugs` naming that
   component.
3. Open that bug and confirm the console and network timeline are populated.
4. Confirm the app still boots with the script tag removed.
5. Report what you changed and where the plugin was installed.

If anything is ambiguous — which entry file registers plugins, whether an error
handler already exists — inspect the repository and follow what is already
there. Do not restructure the application to fit the SDK.