Vue

Create the analytics client in the browser entry before mounting the application. Provide it when components need direct event tracking.

Initialize Tracwell

src/main.ts

import { createApp } from "vue";
import { createTracwell } from "tracwell";
import App from "./App.vue";

const analytics = createTracwell({
  collectionMode: "product",
  projectKey: "tw_live_...",
});

createApp(App)
  .provide("tracwell", analytics)
  .mount("#app");

Vue Router uses the History API in its normal web-history mode, so you do not need an afterEach page-view hook.

Track an event

Keep the initialized client available to the components or services that own successful product outcomes, then call track() after the outcome completes.

TypeScript

const eventId = analytics.track("signup_completed", {
  plan: "starter",
  source: "pricing",
});

if (!eventId) {
  // Collection is blocked or the event did not pass validation.
}

Continue with the custom events guide for naming, property limits, and verification.