# Quickstart: Vue

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

Source: https://oakdata.co/docs/quickstart/vue

---

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:

**Prompt for a coding agent:**

```
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.
```

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

## 1. Install the package

**npm**

```bash
npm install oakdata-js
```

**pnpm**

```bash
pnpm add oakdata-js
```

**yarn**

```bash
yarn add oakdata-js
```

**bun**

```bash
bun add 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**

```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](https://oakdata.co/docs/sdk/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**

```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](https://oakdata.co/docs/concepts/identity). 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](https://oakdata.co/docs/sdk/reference) covers every method and init option.