Quickstart: Vue

Install the OakData SDK in a Vue 3 app and identify users on login.

In a Vue 3 app, initialize OakData once in your entry file (main.ts) before mounting the app. The SDK is framework-agnostic — it watches the History and Navigation APIs directly, so Vue Router navigations are captured as pageviews automatically.

1. Install the package

Terminal
bash
npm install oakdata-js

2. Add your keys

Vue projects scaffolded with Vite expose browser env vars behind the VITE_ prefix. Use your public key (oak_pub_…).

.env
bash
VITE_OAK_KEY=oak_pub_xxxxxxxxxxxxxxxxxxxxxxxx
VITE_OAK_HOST=https://oakdata.co

3. Initialize before mount

src/main.ts
ts
import { createApp } from 'vue'
import oak from 'oakdata-js'
import App from './App.vue'

oak.init(import.meta.env.VITE_OAK_KEY, {
  api_host: import.meta.env.VITE_OAK_HOST,
})

createApp(App).mount('#app')

Pageviews and autocapture begin on load. No router plugin is required.

4. Identify users

Call identify when a user logs in — for example in your auth store action — and reset on logout:

stores/auth.ts
ts
import oak from 'oakdata-js'

export function onLogin(user) {
  oak.identify(user.id, { email: user.email, name: user.name })
}

export function onLogout() {
  oak.reset()
}

5. Track custom events

components/Upgrade.vue
vue
<script setup lang="ts">
import oak from 'oakdata-js'

function upgrade() {
  oak.capture('upgrade_clicked', { plan: 'pro' })
}
</script>

<template>
  <button @click="upgrade">Upgrade</button>
</template>

The full method list lives in the SDK reference.