---
title: "Vue"
description: "Create the analytics client in the browser entry before mounting the application. Provide it when components need direct event tracking."
documentation: "https://tracwell.app/docs/frameworks/vue"
markdown: "https://tracwell.app/docs/frameworks/vue.md"
---

# Vue

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

## Initialize Tracwell

```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 component or service that owns the successful product outcome. Call `track()` only after that outcome completes.

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

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

See the [custom events guide](https://tracwell.app/docs/events.md) for naming, property limits, and verification.