Vue

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

Good to know

All tracking in the Vue integration runs on the client side.

For Vue SPAs, use @helionlabs/web directly — no separate Vue SDK is required. Create a single shared Helion instance and import it across your application.

Installation

Step 1: Install

pnpm install @helionlabs/web

Step 2: Initialize

Create a shared Helion instance in your project:

src/helion.ts

import { Helion } from '@helionlabs/web';

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

Options

Common options

apiUrl - The url of the helion 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)
sessionReplay - Session replay configuration object (default: disabled). See session replay docs for full options.
- enabled - Enable session replay recording (default: false)
- maskAllInputs - Mask all input field values (default: true)
- maskTextSelector - CSS selector for text elements to mask (default: [data-helion-replay-mask])
- blockSelector - CSS selector for elements to replace with a placeholder (default: [data-helion-replay-block])
- blockClass - Class name that blocks elements from being recorded
- ignoreSelector - CSS selector for elements excluded from interaction tracking
- flushIntervalMs - How often (ms) recorded events are sent to the server (default: 10000)
- maxEventsPerChunk - Maximum events per payload chunk (default: 200)
- maxPayloadBytes - Maximum payload size in bytes (default: 1048576)
- scriptUrl - Custom URL for the replay script (script-tag builds only)

clientId — Your Helion client ID (required)
apiUrl — API endpoint (default: https://api.helionlabs.dev)
trackScreenViews — Automatically track screen views (default: true)
trackOutgoingLinks — Automatically track outgoing links (default: true)
trackAttributes — Track elements with data-track attributes (default: true)
trackHashChanges — Track URL hash changes (default: false)
disabled — Disable all tracking (default: false)

Step 3: Usage

Import and use the instance in your Vue components:

<script setup>
import { hl } from '@/helion';

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

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

Usage

Tracking Events

Call hl.track() directly, or use data-track attributes on HTML elements for automatic click tracking.

<script setup>
import { hl } from '@/helion';

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

Identifying Users

Call hl.identify() after authentication to associate the session with a known user profile.

<script setup>
import { hl } from '@/helion';

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

Setting Global Properties

Properties set via setGlobalProperties are attached to every subsequent event.

<script setup>
import { hl } from '@/helion';

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

Incrementing Properties

Increment a numeric property on a user profile. Omit value to increment by 1.

<script setup>
import { hl } from '@/helion';

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

Decrementing Properties

Decrement a numeric property on a user profile. Omit value to decrement by 1.

<script setup>
import { hl } from '@/helion';

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

Clearing User Data

clear() resets the profile, device identity, session, and all group associations. Call it on logout.

<script setup>
import { hl } from '@/helion';

hl.clear();
</script>

Revenue Tracking

Track revenue events directly or accumulate pending revenue and flush in bulk:

<script setup>
import { hl } from '@/helion';

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

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

// Clear pending revenue without sending
hl.clearRevenue();
</script>

Optional: Create a Composable

Wrap the shared instance in a composable for a consistent Vue-idiomatic API:

src/composables/useHelion.ts

import { hl } from '@/helion';

export function useHelion() {
  return hl;
}

Use it in your components:

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

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

Common options

Web options

On this page