> For the complete documentation index, see [llms.txt](https://docs.millimetric.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.millimetric.ai/sdks/frameworks/vue.md).

# Vue

## Install

```bash
npm i @millimetric/track
```

## Vue 3 (Vite)

Init in your entry file:

```ts
// src/main.ts
import { createApp } from "vue";
import { init } from "@millimetric/track";
import App from "./App.vue";
import router from "./router";

init({
  key: import.meta.env.VITE_AOA_KEY,
  host: import.meta.env.VITE_AOA_HOST ?? "https://api.millimetric.ai"
});

createApp(App).use(router).mount("#app");
```

The SDK auto-fires `$pageview` on `history.pushState`, so Vue Router navigations are picked up automatically.

## Identify on login

```ts
// composables/useIdentify.ts
import { watch } from "vue";
import { identify } from "@millimetric/track";
import { useUser } from "./useUser";

export function useIdentify() {
  const user = useUser();
  watch(
    () => user.value?.id,
    (id) => {
      if (id) identify(id, { email: user.value!.email, plan: user.value!.plan });
    },
    { immediate: true }
  );
}
```

Call `useIdentify()` once, e.g. in your root component's `setup()`.

## Track on intent

```vue
<script setup lang="ts">
import { track } from "@millimetric/track";

function onClickPricing(plan: "free" | "pro") {
  track("clicked_pricing", { plan });
}
</script>

<template>
  <button @click="onClickPricing('pro')">Choose Pro</button>
</template>
```

## A Vue plugin (optional)

If you'd rather inject the SDK as a plugin so `useTrack()` is available everywhere:

```ts
// plugins/millimetric.ts
import type { App } from "vue";
import { init, track, identify } from "@millimetric/track";

export default {
  install(app: App, options: { key: string; host?: string }) {
    init(options);
    app.provide("$mm", { track, identify });
  }
};
```

```ts
// main.ts
import millimetric from "./plugins/millimetric";
app.use(millimetric, { key: import.meta.env.VITE_AOA_KEY });
```

```vue
<script setup lang="ts">
import { inject } from "vue";
const mm = inject<{ track: typeof import("@millimetric/track").track }>("$mm")!;
</script>
```

The provided `track` and `identify` are the same functions — there's no advantage over importing them directly except for stricter test isolation.

## Nuxt 3

A client-only plugin:

```ts
// plugins/millimetric.client.ts
import { init } from "@millimetric/track";

export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig();
  init({
    key: config.public.aoaKey,
    host: config.public.aoaHost ?? "https://api.millimetric.ai"
  });
});
```

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      aoaKey: "",
      aoaHost: "https://api.millimetric.ai"
    }
  }
});
```

```bash
# .env
NUXT_PUBLIC_AOA_KEY=pk_live_...
```

Then anywhere in components:

```vue
<script setup lang="ts">
import { track, identify } from "@millimetric/track";
</script>
```

## Server-side events from a Nitro route

Use `@millimetric/track-node` with an `sk_*` key:

```ts
// server/api/signup.post.ts
import { init, track, flush } from "@millimetric/track-node";

init({ key: process.env.AOA_SK!, host: process.env.AOA_HOST!, flushAt: 1 });

export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  track({
    event: "signup",
    anonymous_id: body.anonymous_id,
    user_id: body.user_id,
    properties: { plan: body.plan }
  });
  await flush();
  return { ok: true };
});
```

Don't import `@millimetric/track-node` in client-only code — it expects `sk_*` keys that should never reach the browser.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.millimetric.ai/sdks/frameworks/vue.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.