Vue

Looking for a step-by-step tutorial? Check out the Vue analytics guide.

Good to know

Keep in mind that all tracking here happens on the client!

For Vue SPAs, you can use @openpanel/web directly - no need for a separate Vue SDK. Simply create an OpenPanel instance and use it throughout your application.

Installation

Step 1: Install

pnpm install @openpanel/web

Step 2: Initialize

Create a shared OpenPanel instance in your project:

src/openpanel.ts

import { OpenPanel } from '@openpanel/web';

export const op = new OpenPanel({
  clientId: 'YOUR_CLIENT_ID',
  trackScreenViews: true,
  trackOutgoingLinks: true,
  trackAttributes: true,
});

Options

Common options

apiUrl - The url of the openpanel API or your self-hosted instance
clientId - The client id of your application
clientSecret - The client secret of your application (only required for server-side events)
filter - A function that will be called before sending an event. If it returns false, the event will not be sent
disabled - If true, the library will not send any events

Web options

trackScreenViews - If true, the library will automatically track screen views (default: false)
trackOutgoingLinks - If true, the library will automatically track outgoing links (default: false)
trackAttributes - If true, you can trigger events by using html attributes (<button type="button" data-track="your_event" />) (default: false)

clientId - Your OpenPanel client ID (required)
apiUrl - The API URL to send events to (default: https://api.openpanel.dev)
trackScreenViews - Automatically track screen views (default: true)
trackOutgoingLinks - Automatically track outgoing links (default: true)
trackAttributes - Automatically track elements with data-track attributes (default: true)
trackHashChanges - Track hash changes in URL (default: false)
disabled - Disable tracking (default: false)

Step 3: Usage

Import and use the instance in your Vue components:

<script setup>
import { op } from '@/openpanel';

function handleClick() {
  op.track('button_click', { button: 'signup' });
}
</script>

<template>
  <button @click="handleClick">Trigger event</button>
</template>

Usage

Tracking Events

You can track events with two different methods: by calling the op.track() method directly or by adding data-track attributes to your HTML elements.

<script setup>
import { op } from '@/openpanel';

op.track('my_event', { foo: 'bar' });
</script>

Identifying Users

To identify a user, call the op.identify() method with a unique identifier.

<script setup>
import { op } from '@/openpanel';

op.identify({
  profileId: '123', // Required
  firstName: 'Joe',
  lastName: 'Doe',
  email: 'joe@doe.com',
  properties: {
    tier: 'premium',
  },
});
</script>

Setting Global Properties

To set properties that will be sent with every event:

<script setup>
import { op } from '@/openpanel';

op.setGlobalProperties({
  app_version: '1.0.2',
  environment: 'production',
});
</script>

Incrementing Properties

To increment a numeric property on a user profile.

value is the amount to increment the property by. If not provided, the property will be incremented by 1.

<script setup>
import { op } from '@/openpanel';

op.increment({
  profileId: '1',
  property: 'visits',
  value: 1, // optional
});
</script>

Decrementing Properties

To decrement a numeric property on a user profile.

value is the amount to decrement the property by. If not provided, the property will be decremented by 1.

<script setup>
import { op } from '@/openpanel';

op.decrement({
  profileId: '1',
  property: 'visits',
  value: 1, // optional
});
</script>

Clearing User Data

To clear the current user's data:

<script setup>
import { op } from '@/openpanel';

op.clear();
</script>

Revenue Tracking

Track revenue events:

<script setup>
import { op } from '@/openpanel';

// Track revenue immediately
await op.revenue(29.99, { currency: 'USD' });

// Or accumulate revenue and flush later
op.pendingRevenue(29.99, { currency: 'USD' });
op.pendingRevenue(19.99, { currency: 'USD' });
await op.flushRevenue(); // Sends both revenue events

// Clear pending revenue
op.clearRevenue();
</script>

Optional: Create a Composable

If you prefer using a composable pattern, you can create your own wrapper:

src/composables/useOpenPanel.ts

import { op } from '@/openpanel';

export function useOpenPanel() {
  return op;
}

Then use it in your components:

<script setup>
import { useOpenPanel } from '@/composables/useOpenPanel';

const op = useOpenPanel();
op.track('my_event', { foo: 'bar' });
</script>

Common options

Web options

On this page