Documentation
Start free
MenuVue (Vite)

Installation guides

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.

Add the script

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

index.html
<!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:

src/composables/useProductLenseIdentify.ts
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.

Custom events

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

    ↑ ↓ to move, Enter to open