Skip to content

Nuxt 3

This guide covers Nuxt 3 (Vue 3). Tested with nuxt@3.13.

Terminal window
npm install @vektis-io/tracker

Generate a key at Settings → API Keys in the VEKTIS dashboard, then create or update .env:

Terminal window
NUXT_PUBLIC_VEKTIS_KEY=vk_pub_prd_...

Use a publishable key (vk_pub_*) — it’s scoped to event ingest only and safe to ship in your browser bundle.

Expose the key in nuxt.config.ts:

nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
public: {
vektisKey: "", // populated from NUXT_PUBLIC_VEKTIS_KEY
},
},
});

The tracker is browser-only, so the plugin must run client-side. Create plugins/vektis.client.ts:

plugins/vektis.client.ts
import * as vektis from "@vektis-io/tracker";
export default defineNuxtPlugin(() => {
const config = useRuntimeConfig();
vektis.init({ apiKey: config.public.vektisKey as string });
});

The .client.ts suffix tells Nuxt to load this plugin only in the browser.

import * as vektis from "@vektis-io/tracker";
vektis.identify({
customer_id: "acct_A1",
user_id: "user_123",
});

In a Nuxt component, call this from your auth state watcher (e.g., watch(user, ...) or inside an onMounted after the session loads).

import * as vektis from "@vektis-io/tracker";
vektis.track("feature.used", { feature_id: "reports-dashboard" });

In the browser dev console:

vektis.getStatus();
// { state: "READY", queueLength: 0, identityCustomerId: "acct_A1", identityUserId: "user_123" }