# Nuxt

Add ProductLense to a Nuxt 3 or 4 app through app.head in nuxt.config.ts, then identify users from a client plugin.

In Nuxt, add the script through `app.head.script` in `nuxt.config.ts` so it is rendered into the head of every page. Vue Router navigation is recorded through the history API without extra code.

## Add the script

Replace `SITE_ID` with the id from Settings → Sites in the ProductLense dashboard.

```ts title="nuxt.config.ts" {5-9}
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          innerHTML:
            'window.productlense=window.productlense||function(){(window.productlense.q=window.productlense.q||[]).push(arguments)}',
        },
        { src: 'https://api.productlense.app/a.js', defer: true, 'data-site': 'SITE_ID' },
      ],
    },
  },
});
```

The first entry is the queue stub, so calls made before the script loads are kept. Do not set `type: 'module'` on the ProductLense entry.

## Identify users

A client-only plugin runs in the browser, where `window` exists. This example reads the signed-in user from shared state; use whatever your auth layer provides.

```ts title="plugins/productlense.client.ts" {12}
declare global {
  interface Window {
    productlense?: (...args: unknown[]) => void;
  }
}

export default defineNuxtPlugin(() => {
  const user = useState<{ id: string } | null>('user');
  watch(
    user,
    (u) => {
      if (u) window.productlense?.('identify', u.id);
    },
    { immediate: true },
  );
});
```

The `.client.ts` suffix keeps the plugin out of server rendering. Use the same id you store on the customer in your billing provider; see [how payments are attributed](/docs/revenue/attribution).

## Custom events

Templates cannot reach `window` directly, so call events from `<script setup>`:

```vue title="components/UpgradeButton.vue" {3}
<script setup lang="ts">
function upgrade() {
  window.productlense?.('event', 'Upgrade clicked', { plan: 'growth' });
}
</script>

<template>
  <button @click="upgrade">Upgrade</button>
</template>
```

See [custom events](/docs/track/custom-events) for naming rules.

## Verify your installation

1. Deploy, then open your site in a normal browser window.
2. Open the Live page in the ProductLense dashboard. Your visit appears within a few seconds.
3. In the browser's developer tools, the Network tab shows a `POST` to `https://api.productlense.app/api/e` with status `204`. Navigate to another page: a second pageview follows.

`nuxt dev` runs on `localhost`, where nothing is sent unless you add `'data-dev': 'true'` to the script entry. Ad blockers in your own browser may block the request. If the visit does not appear, follow [Verify your installation](/docs/install/verify).