---
title: "Nuxt"
description: "Use a client-only Nuxt plugin. The .client suffix keeps browser initialization out of server rendering."
documentation: "https://tracwell.app/docs/frameworks/nuxt"
markdown: "https://tracwell.app/docs/frameworks/nuxt.md"
---

# Nuxt

> Use a client-only Nuxt plugin. The .client suffix keeps browser initialization out of server rendering.

## Initialize Tracwell

```ts
import { createTracwell } from "tracwell";

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

  return {
    provide: { tracwell: analytics },
  };
});
```

Access the client as $tracwell in Nuxt code. Standard Nuxt navigation is tracked automatically.

## 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.