# @flusterduck/vue

Vue.js integration for Flusterduck. Provides a `FlusterduckPlugin` for app-level initialization and a `useFlusterduck` composable for tracking helpers.

## Installation

```bash
npm install flusterduck @flusterduck/vue
```

## Plugin usage

Install the plugin in your app entry point. This initializes the SDK once for the entire app.

```ts
// main.ts
import { createApp } from 'vue';
import { FlusterduckPlugin } from '@flusterduck/vue';
import App from './App.vue';

const app = createApp(App);

app.use(FlusterduckPlugin, {
  key: 'fd_pub_...',
  environment: 'production',
});

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

## Composable usage

Use `useFlusterduck` in any component to get tracking helpers. The SDK must already be initialized via the plugin or a prior `init` call.

```vue
<script setup lang="ts">
import { useFlusterduck } from '@flusterduck/vue';

const { signal, track, identify, setConsent, optOut } = useFlusterduck();
</script>

<template>
  <button @click="signal('checkout_error', { element: '#pay-btn' })">
    Pay
  </button>
</template>
```

## Consent gating

```ts
app.use(FlusterduckPlugin, {
  key: 'fd_pub_...',
  respectDoNotTrack: true,
});
```

After mounting, call `setConsent(true)` from any component to start tracking if the user was initially excluded by DNT or GPC.

## API

```ts
signal(name: string, data?: { element?: string; metadata?: Record<string, unknown>; weight?: number }): void
track(name: string, metadata?: Record<string, unknown>): void
identify(segment: Record<string, string>): void
setConsent(consented: boolean): void
optOut(): void
```

All `Config` options from the core `flusterduck` package are supported as plugin options.