Vue

Vue 3 (and Nuxt) + @millimetric/track.

Install

npm i @millimetric/track

Vue 3 (Vite)

Init in your entry file:

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

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

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

// 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 });
  }
};

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

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

// 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"
  });
});

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

# .env
NUXT_PUBLIC_AOA_KEY=pk_live_...

Then anywhere in components:

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

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