Vue 3

@larabug/vue is a Vue 3 plugin plus a handful of composables. It hooks into app.config.errorHandler and app.config.warnHandler without replacing them — your existing handlers still run.

Install

npm install @larabug/vue

Register the plugin

import { createApp } from 'vue';
import { LaraBugVuePlugin } from '@larabug/vue';
import App from './App.vue';

const app = createApp(App);

app.use(LaraBugVuePlugin, {
  dsn: 'https://login_key:project_key@www.larabug.com/api/log',
  environment: import.meta.env.MODE,
  release: import.meta.env.VITE_APP_VERSION,

  // Optional — attach component props and lifecycle hooks to captured errors
  attachProps: true,
  trackLifecycleHooks: false,
});

app.mount('#app');

The plugin installs the global browser handlers and wires into Vue's error handler chain:

• When a Vue render or lifecycle throws, app.config.errorHandler fires → LaraBug captures → your existing handler (if any) runs after.
• When Vue emits a warning, app.config.warnHandler fires → LaraBug records it as a breadcrumb → your existing handler runs after.

If an existing errorHandler or warnHandler was set before app.use(LaraBugVuePlugin), LaraBug saves a reference and calls it after its own capture. Your chain is preserved.

Composables

useLaraBugUser

Sync reactive user state with LaraBug's user context:

<script setup>
import { useLaraBugUser } from '@larabug/vue';
import { useAuthStore } from '@/stores/auth';
import { computed } from 'vue';

const auth = useAuthStore();
useLaraBugUser(computed(() => auth.user));
</script>

The composable watches the ref and calls setUser whenever it changes. On component unmount it clears the user.

useLaraBug

Get a reference to the raw client for imperative calls:

<script setup>
import { useLaraBug } from '@larabug/vue';

const larabug = useLaraBug();

function handleCheckout() {
  try {
    processCheckout();
  } catch (error) {
    larabug.captureException(error, { step: 'checkout' });
  }
}
</script>

Plugin options

All the common Vue gotchas (SSR-safe window checks, environment gating) are handled inside the plugin — you can register it unconditionally in client entry files.