Vue

Installation

npm install --save @outlit/browser

pnpm add @outlit/browser

yarn add @outlit/browser

bun add @outlit/browser

Quick start

Install the OutlitPlugin in your app’s entry point and use composables in components.

With authentication (recommended)
Anonymous only

If your app has user authentication, use the useOutlitUser composable to automatically sync user identity. This is the recommended approach as it automatically handles login/logout transitions.

// main.ts
import { createApp } from 'vue'
import { OutlitPlugin } from '@outlit/browser/vue'
import App from './App.vue'

const app = createApp(App)

app.use(OutlitPlugin, {
  publicKey: import.meta.env.VITE_OUTLIT_KEY,
  trackPageviews: true,
})

app.mount('#app')

<!-- App.vue -->
<script setup>
import { computed } from 'vue'
import { useOutlitUser } from '@outlit/browser/vue'
import { useAuthStore } from '@/stores/auth'

const auth = useAuthStore()

// Build user identity from your auth state
const outlitUser = computed(() => {
  if (!auth.user) return null
  return {
    email: auth.user.email,
    userId: auth.user.id,
    traits: {
      name: auth.user.name,
      plan: auth.user.plan
    }
  }
})

// Auto-sync user identity with Outlit
useOutlitUser(outlitUser)
</script>

<template>
  <router-view />
</template>

For marketing sites without authentication, just install the plugin:

// main.ts
import { createApp } from 'vue'
import { OutlitPlugin } from '@outlit/browser/vue'
import App from './App.vue'

const app = createApp(App)

app.use(OutlitPlugin, {
  publicKey: import.meta.env.VITE_OUTLIT_KEY,
  trackPageviews: true,
})

app.mount('#app')

Set your public key in .env:

VITE_OUTLIT_KEY=pk_your_public_key_here

Using the composable

Track custom events with the useOutlit composable:

<script setup>
import { useOutlit } from '@outlit/browser/vue'

const { track } = useOutlit()

function handlePricingClick() {
  track('pricing_clicked', { plan: 'pro' })
}
</script>

<template>
  <button @click="handlePricingClick">
    View Pricing
  </button>
</template>

Plugin configuration

OutlitPlugin

The OutlitPlugin initializes tracking and provides context to all components.

import { OutlitPlugin } from '@outlit/browser/vue'

app.use(OutlitPlugin, {
  publicKey: 'pk_xxx',
  trackPageviews: true,
  trackForms: true,
  trackEngagement: true,
  formFieldDenylist: ['custom_secret_field'],
  flushInterval: 5000,
})

Options

string

required

Your organization’s public key.

string

default:"https://app.outlit.ai"

API endpoint for sending events.

boolean

default:"true"

Automatically track pageviews on route changes.

boolean

default:"true"

Automatically capture form submissions.

string[]

Additional field names to exclude from form capture.

number

default:"5000"

How often to flush queued events (ms).

boolean | "auto"

default:"\"auto\""

Controls when tracking starts. "auto" (default) asks the Outlit edge endpoint whether the visitor’s region requires opt-in consent: tracking enables automatically outside the EEA, UK, and Switzerland, and stays off in those regions or when the region can’t be determined. The check fails closed on errors. true enables immediately; false waits for enableTracking() from the useOutlit composable. isTrackingEnabled updates automatically when auto mode enables tracking asynchronously.

boolean

default:"true"

Automatically identify users when they submit forms containing an email field. Set to false to disable and call identify() manually.

boolean

default:"true"

Track engagement metrics (active time on page).

number

default:"30000"

Idle timeout in milliseconds for engagement tracking.

boolean

default:"true"

Track booking events from calendar embeds (Cal.com, Calendly).

User identity patterns

The useOutlitUser composable is the recommended way to handle user identity. It’s simpler and more reliable than manual identify() calls because:

Automatic lifecycle management: Login/logout transitions are handled automatically
Reactive: Uses Vue’s reactivity system to sync with your auth state
Cleaner code: No need for watchers with manual setUser() calls

Pattern 1: with Pinia store

<!-- App.vue or a top-level component -->
<script setup>
import { computed } from 'vue'
import { useOutlitUser } from '@outlit/browser/vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

const outlitUser = computed(() => {
  if (!userStore.user) return null
  return {
    email: userStore.user.email,
    userId: userStore.user.id,
    traits: {
      name: userStore.user.name,
      plan: userStore.user.plan
    }
  }
})

// Automatically syncs when userStore.user changes
useOutlitUser(outlitUser)
</script>

Pattern 2: with composable auth

<script setup>
import { computed } from 'vue'
import { useOutlitUser } from '@outlit/browser/vue'
import { useAuth } from '@/composables/useAuth'

const { user, isAuthenticated } = useAuth()

const outlitUser = computed(() => {
  if (!isAuthenticated.value || !user.value) return null
  return {
    email: user.value.email,
    userId: user.value.id,
    traits: { name: user.value.name }
  }
})

useOutlitUser(outlitUser)
</script>

When the user ref changes (login/logout), useOutlitUser automatically calls setUser() or clearUser() internally. You don’t need to call these methods manually.

Composables

useOutlit

The primary composable for tracking events and identifying users.

<script setup>
import { useOutlit } from '@outlit/browser/vue'

const {
  track,
  identify,
  setUser,
  clearUser,
  user,       // User identity helper
  getVisitorId,
  isInitialized,
  isTrackingEnabled,
  enableTracking,
  disableTracking,
} = useOutlit()

// Track an event
track('button_clicked', { buttonId: 'cta' })

// Identify the user
identify({ email: 'user@example.com', traits: { plan: 'pro' } })

// Track the ordinary event selected as your activation event
track('onboarding_completed', { flow: 'onboarding' })

// Get visitor ID (null if tracking not enabled)
const visitorId = getVisitorId()
</script>

Returns

(eventName: string, properties?: object) => void

Track a custom event.

(options: IdentifyOptions) => void

Identify the current visitor.

(identity: UserIdentity) => void

Set the current user identity. Ideal for SPA authentication flows.

() => void

Clear the current user identity (on logout).

object

User identity namespace:

user.identify(options) - Identify the user

() => string | null

Get the current visitor’s ID. Returns null if tracking is not enabled.

Ref<boolean>

Whether tracking is currently enabled. Will be false until enableTracking() is called when autoTrack is false, while the "auto" region check is pending, or when that check requires consent or fails.

() => void

Enable tracking. Call this after obtaining user consent. Needed when autoTrack is false, or in the default "auto" mode when the visitor’s region requires consent or the region check fails.

() => void

Disable tracking and flush any pending events. Use this when a user declines or revokes consent.

Ref<boolean>

Whether the tracker is ready.

useTrack

A convenience composable that returns just the track function:

<script setup>
import { useTrack } from '@outlit/browser/vue'

const track = useTrack()
</script>

<template>
  <button @click="track('feature_clicked', { featureId: '123' })">
    Try Feature
  </button>
</template>

useIdentify

A convenience composable that returns just the identify function:

<script setup>
import { useIdentify } from '@outlit/browser/vue'

const identify = useIdentify()

async function handleLogin(email, password) {
  const user = await login(email, password)

  identify({
    email: user.email,
    userId: user.id,
    traits: {
      name: user.name,
      plan: user.plan
    }
  })
}
</script>

useOutlitUser

Automatically syncs a reactive user ref with Outlit:

<script setup>
import { ref, computed } from 'vue'
import { useOutlitUser } from '@outlit/browser/vue'

// Your auth state
const currentUser = ref(null)

// Auto-sync with Outlit - handles login/logout automatically
useOutlitUser(currentUser)

// When user logs in
async function onLogin(credentials) {
  const user = await api.login(credentials)
  currentUser.value = {
    email: user.email,
    userId: user.id,
    traits: { name: user.name, plan: user.plan }
  }
}

// When user logs out
function onLogout() {
  currentUser.value = null
}
</script>

The default autoTrack: "auto" mode already keeps tracking off for visitors in regions that require opt-in consent (EEA, UK, Switzerland, or unknown). enableTracking() — typically wired to your consent banner’s accept action — is what grants consent and is persisted for future sessions. To wait for enableTracking() instead — unless a previous opt-in is stored:

// main.ts
app.use(OutlitPlugin, {
  publicKey: import.meta.env.VITE_OUTLIT_KEY,
  autoTrack: false, // Don't track until consent
})

<!-- CookieBanner.vue -->
<script setup>
import { useOutlit } from '@outlit/browser/vue'

const { enableTracking, disableTracking, isTrackingEnabled } = useOutlit()

function acceptTracking() {
  localStorage.setItem('tracking-consent', 'true')
  enableTracking()
}
</script>

<template>
  <div v-if="!isTrackingEnabled" class="cookie-banner">
    <p>We use cookies to improve your experience.</p>
    <div class="flex gap-2">
      <button @click="acceptTracking" class="btn-primary">
        Accept
      </button>
      <button @click="disableTracking" class="btn-secondary">
        Decline
      </button>
    </div>
  </div>
</template>

Activation event

Track your value milestone as an ordinary event once it succeeds:

<script setup>
import { useOutlit } from '@outlit/browser/vue'

const { track } = useOutlit()

// Call this from your app's confirmed onboarding success callback.
function onOnboardingCompleted() {
  track('onboarding_completed', { flow: 'onboarding', step: 'completed' })
}
</script>

Choose this event as your activation event in Outlit. The first matching event records activation once for each eligible resolved person and company, independently. Billing status comes from verified integrations such as Stripe. See Customer journey.

Vue Router integration

Track pageviews automatically with Vue Router:

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: []
})

export default router

If you set trackPageviews: true during plugin install (default), pageviews are tracked automatically. Vue Router’s History API changes are detected by the SDK.

Pinia integration

Track state changes with Pinia:

// stores/user.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    user: null as User | null
  }),

  actions: {
    async login(email: string, password: string) {
      const user = await api.login(email, password)
      this.user = user
      // Identity is synced automatically via useOutlitUser()
    },

    logout() {
      this.user = null
      // Identity is cleared automatically via useOutlitUser()
    }
  }
})

TypeScript support

Full TypeScript support is included:

import {
  useOutlit,
  useTrack,
  useIdentify,
  useOutlitUser,
  OutlitPlugin,
  type OutlitPluginOptions,
  type UseOutlitReturn,
} from '@outlit/browser/vue'

import type { UserIdentity } from '@outlit/browser'

// Types are inferred
const { track, identify, setUser } = useOutlit()

// User identity type
const user: UserIdentity = {
  email: 'user@example.com',
  userId: 'usr_123',
  traits: { name: 'Jane' }
}

SSR with Nuxt

For Nuxt applications, see the dedicated Nuxt integration guide.

Next steps

Nuxt integration

Use Outlit with Nuxt 3

Server-side tracking

Track events from your backend

Identity resolution

Learn how visits and events link to people

npm package

Full API reference

Agents

CLI

Concepts

Outlit SDKs

Examples

Installation

Quick start

Using the composable

Plugin configuration

OutlitPlugin

Options

User identity patterns

Pattern 1: with Pinia store

Pattern 2: with composable auth

Composables

useOutlit

Returns

useTrack

useIdentify

useOutlitUser

Activation event

Vue Router integration

Pinia integration

TypeScript support

SSR with Nuxt

Next steps

Nuxt integration

Server-side tracking

Identity resolution

npm package

​Installation

​Quick start

​Using the composable

​Plugin configuration

​OutlitPlugin

​Options

​User identity patterns

​Pattern 1: with Pinia store

​Pattern 2: with composable auth

​Composables

​useOutlit

​Returns

​useTrack

​useIdentify

​useOutlitUser

​Consent management

​Activation event

​Vue Router integration

​Pinia integration

​TypeScript support

​SSR with Nuxt

​Next steps

Nuxt integration

Server-side tracking

Identity resolution

npm package

Installation

Quick start

Using the composable

Plugin configuration

OutlitPlugin

Options

User identity patterns

Pattern 1: with Pinia store

Pattern 2: with composable auth

Composables

useOutlit

Returns

useTrack

useIdentify

useOutlitUser

Consent management

Activation event

Vue Router integration

Pinia integration

TypeScript support

SSR with Nuxt

Next steps