@lightworkai.official/debug-capture-vue

@lightworkai.official/debug-capture-vue

Vue 3 bindings for @lightworkai.official/debug-capture.

// main.ts
import { configureDebugCapture } from "@lightworkai.official/debug-capture-vue";

configureDebugCapture({
  host: "https://support.example.com",
  realmKey: "pk_live_…",
  app: { version: "1.4.2", environment: import.meta.env.MODE },
  user: () => ({ id: auth.user?.id, email: auth.user?.email, fullName: auth.user?.name }),
});

<!-- App.vue — once, above <RouterView> -->
<DebugCaptureInit />

<!-- wherever the button belongs, styled by you -->
<ReportProblemButton class="rounded-md border p-2 hover:bg-gray-50" />

Notes

No isCustomElement config needed. The reporter is a custom element, but it is created imperatively by installDebugCapture and never appears in a template, so Vue's compiler never sees an unknown tag. Absorbing that is most of why this wrapper exists.

SupportPortalButton sends someone to their tickets on the support host, already signed in. It needs identity in the config: a token your server signs, because realmKey is public and can authorise filing a report but never reading one back. See the core README.

This replaced an embedded panel. The panel was a ticket list, a thread and a reply editor in three frameworks over a read API — which meant every change to the way a ticket looks landed in four repositories. The support host renders that screen already, so it owns it now; the cost is a context switch, and the panel is still in the 0.6.x line if you would rather pay the other price.

<SupportPortalButton />
<SupportPortalButton same-tab @error="notify" />

Components are defineComponent + h, not SFCs, so the package ships as plain TypeScript with no build step of its own and nothing for a consumer to configure. There are two components and neither has a template worth the machinery.

Mount DebugCaptureInit above the router view — the buffers must be recording before a user hits a problem, or the report arrives with no trail of how they got there.