SDK Reference
Vue
The Databuddy Vue SDK provides a component for script injection and composables for feature flags. Works with Vue 3.
Installation
bun add @databuddy/sdkQuick Start
Add the Databuddy component to your App.vue:
<script setup>
import { Databuddy } from "@databuddy/sdk/vue";
const clientId = import.meta.env.VITE_DATABUDDY_CLIENT_ID;
</script>
<template>
<Databuddy
:client-id="clientId"
track-web-vitals
track-errors
/>
<RouterView />
</template>Databuddy Component
The Databuddy component injects the tracking script and configures analytics.
Props
Tracking Features
Batching & Performance
Full Example
<script setup>
import { Databuddy } from "@databuddy/sdk/vue";
const clientId = import.meta.env.VITE_DATABUDDY_CLIENT_ID;
const isDevelopment = import.meta.env.DEV;
</script>
<template>
<Databuddy
:client-id="clientId"
:track-web-vitals="true"
:track-errors="true"
:track-outgoing-links="true"
:enable-batching="true"
:batch-size="20"
:disabled="isDevelopment"
/>
<RouterView />
</template>Tracking Events
Use the global tracker or import helpers:
<script setup>
import { track } from "@databuddy/sdk";
function handleSignup() {
track("signup_clicked", {
source: "header",
plan: "pro"
});
}
</script>
<template>
<button @click="handleSignup">Sign Up</button>
</template>Using window.databuddy
You can also use the global tracker directly:
<script setup>
function handleClick() {
window.databuddy?.track("button_clicked", {
button_id: "cta"
});
}
</script>Environment Setup
VITE_DATABUDDY_CLIENT_ID=your-client-id-hereFeature Flags
Vue has built-in feature flag support:
<script setup>
import { useFlag } from "@databuddy/sdk/vue";
const darkMode = useFlag("dark-mode");
</script>
<template>
<div :class="{ dark: darkMode.on }">
<template v-if="darkMode.loading">
<Skeleton />
</template>
<template v-else>
<MainContent />
</template>
</div>
</template>See Feature Flags for complete Vue flag documentation.
Privacy Patterns
Skip Patterns
<Databuddy
:client-id="clientId"
:skip-patterns="['/admin/**', '/internal/*']"
/>Mask Patterns
<Databuddy
:client-id="clientId"
:mask-patterns="['/users/*', '/orders/**']"
/>Related
How is this guide?