Nuxt 3
This guide covers Nuxt 3 (Vue 3). Tested with nuxt@3.13.
1. Install the package
Section titled “1. Install the package”npm install @vektis-io/trackerpnpm add @vektis-io/trackeryarn add @vektis-io/tracker2. Add your API key
Section titled “2. Add your API key”Generate a key at Settings → API Keys in the VEKTIS dashboard, then create or update .env:
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:
export default defineNuxtConfig({ runtimeConfig: { public: { vektisKey: "", // populated from NUXT_PUBLIC_VEKTIS_KEY }, },});3. Initialize the SDK
Section titled “3. Initialize the SDK”The tracker is browser-only, so the plugin must run client-side. Create 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.
4. Identify the user after sign-in
Section titled “4. Identify the user after sign-in”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).
5. Send an event
Section titled “5. Send an event”import * as vektis from "@vektis-io/tracker";
vektis.track("feature.used", { feature_id: "reports-dashboard" });6. Verify the install
Section titled “6. Verify the install”In the browser dev console:
vektis.getStatus();// { state: "READY", queueLength: 0, identityCustomerId: "acct_A1", identityUserId: "user_123" }