# Vue 3

`@larabug/vue` is the browser client plus a plugin and four composables.

## Install the plugin

```js resources/js/app.js
import { createApp } from 'vue'
import { LaraBugVuePlugin } from '@larabug/vue'
import App from './App.vue'

const app = createApp(App)

app.use(LaraBugVuePlugin, {
  dsn: import.meta.env.VITE_LARABUG_DSN,
  environment: import.meta.env.MODE,
})

app.mount('#app')
```

The plugin hooks Vue's own error handler, so an error thrown in a component is reported with the component it came from rather than as a bare stack trace.

It takes every option [installation](/docs/javascript/installation) lists, plus three of its own:

| Option | What it does |
| --- | --- |
| `attachProps` | Attach the failing component's props to the report. |
| `trackLifecycleHooks` | Record lifecycle hooks as breadcrumbs. |
| `logErrors` | Keep logging errors to the console as well as reporting them. |

`attachProps` is useful and worth a thought: props are your data, and a component holding a signed in user holds their details.

## The composables

```vue
<script setup>
import { useLaraBug, useLaraBugUser, useLaraBugContext, useLaraBugTag } from '@larabug/vue'

const larabug = useLaraBug()

useLaraBugUser({ id: props.user.id, plan: props.user.plan })
useLaraBugContext({ project_id: props.project.id })
useLaraBugTag('surface', 'project-detail')

function retry() {
  try {
    resync()
  } catch (error) {
    larabug.captureException(error, { retry: true })
  }
}
</script>
```

## With Inertia

Install `@larabug/inertia` as well and follow [Inertia](/docs/javascript/inertia). The Vue plugin stays where it is; the Inertia one adds what it knows about visits.