Nuxt

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.

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.

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.

Custom events#

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

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

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

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