Nuxt 3

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

1. Install the package

npm install @vektis-io/tracker

pnpm add @vektis-io/tracker

yarn add @vektis-io/tracker

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

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.

user_id is what produces the Seats number on a dev item’s Customer Breakdown — how many people at an account used the feature, out of everyone there VEKTIS has seen. Send a stable id from your own system, never an email address (hashed or otherwise); VEKTIS only ever counts distinct people within a feature, and never displays the identifier or any individual’s activity across features.

import * as vektis from "@vektis-io/tracker";

vektis.identify({
  customer_id: "acct_A1",
  user_id: "user_123",
  name: "Acme Corp",
});

The optional name is the account’s display name. It is what the Customer Breakdown shows instead of the raw customer_id — omit it and every row there is an opaque id.

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

import * as vektis from "@vektis-io/tracker";

vektis.track("feature.used", { feature_id: "reports-dashboard" });

6. Verify the install

In the browser dev console:

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