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
Install the flags plugin in your app entry, then use the useFlag composable:
import { createApp } from "vue";
import { createFlagsPlugin } from "@databuddy/sdk/vue";
import App from "./App.vue";
createApp(App)
.use(createFlagsPlugin({
clientId: import.meta.env.VITE_DATABUDDY_CLIENT_ID
}))
.mount("#app");<script setup>
import { useFlag } from "@databuddy/sdk/vue";
const { on: darkMode, loading } = useFlag("dark-mode");
</script>
<template>
<div :class="{ dark: darkMode }">
<template v-if="loading">
<Skeleton />
</template>
<template v-else>
<MainContent />
</template>
</div>
</template>useFlag returns { on, loading, state } as refs. Destructured refs unwrap automatically in templates; in script code, read darkMode.value and loading.value.
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?