Quickstart: Vue - Docs

In a Vue 3 app you call oak.init() once in main.ts, before mounting the app. The SDK is framework-agnostic - it watches the History and Navigation APIs directly, so Vue Router navigations become pageviews automatically.

In a hurry? Paste this prompt into Claude Code, Cursor, or any agent working in your repo, and give it your public key when asked:

Set up with your AI agent

Paste into Claude Code, Cursor, or any agent in your repo

Set up OakData product analytics in this Vue 3 app using the oakdata-js SDK.

1
Install the package: run "npm install oakdata-js".
2
Create or edit .env at the project root and add:
```
VITE_OAK_KEY=<my public key, starts with oak_pub_>
```
```
VITE_OAK_HOST=https://oakdata.co
```
Ask me for the key value if you don't already have it.
3
In src/main.ts, before createApp(App).mount(), import oakdata-js and call oak.init(import.meta.env.VITE_OAK_KEY, { api_host: import.meta.env.VITE_OAK_HOST }).
4
Wherever auth resolves with a signed-in user (e.g. the auth store's login action), call oak.identify(user.id, { email: user.email }). On logout, call oak.reset().

Use my existing auth code. Don't add any other analytics providers or plugins. Show me the changes before applying them.

Your agent will ask for your key.

Prefer to wire it up yourself? The steps below are exactly what that prompt does.

1. Install the package

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_…) - it's safe to ship in client code.

.env

bash

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

3. Initialize before mount

src/main.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 start immediately. No router plugin needed.

4. Identify signed-in users

Call identify when a user logs in - your auth store action is a good home - and reset on logout so the next person on that browser starts fresh:

stores/auth.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()
}

identify links everything the visitor did anonymously to the identified profile - see identity resolution. Calls made before init() are queued and replayed, so ordering never matters.

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 SDK reference covers every method and init option.