@flusterduck/vue

@flusterduck/vue

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

Installation

npm install flusterduck @flusterduck/vue

Plugin usage

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

// 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.

<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

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

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.