BlogPricingDashboardGitHubGitHub★ 898
SDK Reference

Vue

The Databuddy Vue SDK provides a component for script injection and composables for feature flags. Works with Vue 3 and Nuxt 3.

Installation

bash
bun add @databuddy/sdk

Quick Start

Add the Databuddy component to your App.vue:

App.vuehtml
<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

PropTypeDefaultDescription
client-idstringRequiredYour client ID
disabledbooleanfalseDisable all tracking
debugbooleanfalseEnable debug logging

Tracking Features

PropDefaultDescription
track-performancetruePage load times and navigation timing
track-web-vitalsfalseCore Web Vitals (LCP, FID, CLS, TTFB)
track-errorsfalseJavaScript errors and unhandled rejections
track-outgoing-linksfalseClicks on external links
track-scroll-depthfalseScroll depth milestones
track-interactionsfalseButton clicks and form submissions
track-attributesfalseElements with data-track attributes

Batching & Performance

PropDefaultDescription
enable-batchingfalseGroup events into batches
batch-size10Events per batch (1-50)
batch-timeout2000Batch timeout in ms
sampling-rate1.0Event sampling rate (0.0-1.0)

Full Example

App.vuehtml
<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:

html
<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:

html
<script setup>
function handleClick() {
window.databuddy?.track("button_clicked", {
  button_id: "cta"
});
}
</script>

Environment Setup

.envbash
VITE_DATABUDDY_CLIENT_ID=your-client-id-here

Nuxt 3

For Nuxt 3, create a plugin:

plugins/databuddy.client.tstsx
import { Databuddy } from "@databuddy/sdk/vue";

export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component("Databuddy", Databuddy);
});

Then use in your app.vue:

app.vuehtml
<template>
<Databuddy
  :client-id="runtimeConfig.public.databuddyClientId"
  track-web-vitals
/>
<NuxtPage />
</template>

<script setup>
const runtimeConfig = useRuntimeConfig();
</script>
nuxt.config.tstsx
export default defineNuxtConfig({
runtimeConfig: {
  public: {
    databuddyClientId: process.env.DATABUDDY_CLIENT_ID
  }
}
});

Feature Flags

Vue has built-in feature flag support:

html
<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

html
<Databuddy
:client-id="clientId"
:skip-patterns="['/admin/**', '/internal/*']"
/>

Mask Patterns

html
<Databuddy
:client-id="clientId"
:mask-patterns="['/users/*', '/orders/**']"
/>
Tracker Helpers

track, flush, getAnonymousId, and more helper functions

Feature Flags

Feature flag composables for Vue

Configuration

Complete configuration reference

How is this guide?

Edit on GitHub