# Vue (Vite)

Add ProductLense to a Vue 3 single-page app built with Vite by pasting the script into index.html, then identify users from a composable.

A Vue app built with Vite has one `index.html`, so the script goes there once. Vue Router in history mode is recorded without extra code, because the script listens to `pushState`, `replaceState` and `popstate`. For Nuxt, follow the [Nuxt guide](/docs/install/nuxt).

## Add the script

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

```html title="index.html" {5-6}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script>window.productlense=window.productlense||function(){(window.productlense.q=window.productlense.q||[]).push(arguments)}</script>
    <script defer data-site="SITE_ID" src="https://api.productlense.app/a.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
```


## Identify users

Call `identify` once the signed-in user is known. A composable used in your root component keeps it in one place:

```ts title="src/composables/useProductLenseIdentify.ts" {11}
import { watch, type Ref } from 'vue';

declare global {
  interface Window {
    productlense?: (...args: unknown[]) => void;
  }
}

export function useProductLenseIdentify(user: Ref<{ id: string; email?: string } | null>) {
  watch(user, (u) => {
    if (u) window.productlense?.('identify', u.id, u.email ? { email: u.email } : undefined);
  }, { immediate: true });
}
```

Use the same id you store on the customer in your billing provider; see [how payments are attributed](/docs/revenue/attribution).

## Custom events

```vue title="src/components/UpgradeButton.vue"
<template>
  <button @click="upgrade">Upgrade</button>
</template>

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

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

## Verify your installation

1. Build and 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 route: a second pageview follows.

The Vite dev server runs on `localhost`, where nothing is sent unless you add `data-dev="true"` to the tag. If the visit does not appear, follow [Verify your installation](/docs/install/verify).