Skip to main content

​
Installation

npm install --save @outlit/browser

​
Quick Start

Initialize Outlit in your app’s entry point: 
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import outlit from '@outlit/browser'

outlit.init({
  publicKey: import.meta.env.VITE_OUTLIT_KEY,
  trackPageviews: true,
})

createApp(App).mount('#app')
Set your public key in .env:
VITE_OUTLIT_KEY=pk_your_public_key_here

​
Tracking Events

Track custom events using the Composition API: 
<script setup>
import outlit from '@outlit/browser'

function handleCheckout() {
  outlit.track('checkout_started', {
    plan: 'pro',
    amount: 99
  })
}
</script>

<template>
  <button @click="handleCheckout">
    Checkout
  </button>
</template>

​
With Options API

<script>
import outlit from '@outlit/browser'

export default {
  methods: {
    handleCheckout() {
      outlit.track('checkout_started', {
        plan: 'pro',
        amount: 99
      })
    }
  }
}
</script>

<template>
  <button @click="handleCheckout">
    Checkout
  </button>
</template>

​
Identifying Users

Call identify() after authentication: 
<script setup>
import { ref } from 'vue'
import outlit from '@outlit/browser'

const email = ref('')
const password = ref('')

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

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

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="email" type="email" placeholder="Email" />
    <input v-model="password" type="password" placeholder="Password" />
    <button type="submit">Login</button>
  </form>
</template>

​
Vue Router Integration

Track pageviews automatically with Vue Router: 
// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import outlit from '@outlit/browser'

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

// Track pageviews on route change
router.afterEach((to) => {
  outlit.track('pageview', {
    path: to.path,
    name: to.name,
    params: to.params
  })
})

export default router
If you set trackPageviews: true during init, pageviews are tracked automatically. The above example is only needed if you want custom pageview logic.

​
Composables

Create a reusable composable for tracking: 
// composables/useOutlit.ts
import outlit from '@outlit/browser'

export function useOutlit() {
  function track(eventName: string, properties?: Record<string, any>) {
    outlit.track(eventName, properties)
  }

  function identify(email: string, traits?: Record<string, any>) {
    outlit.identify({ email, traits })
  }

  return {
    track,
    identify
  }
}
Use in components: 
<script setup>
import { useOutlit } from '@/composables/useOutlit'

const { track } = useOutlit()

function handleFeatureClick() {
  track('feature_clicked', { feature: 'export' })
}
</script>

​
Pinia Integration

Track state changes with Pinia: 
// stores/user.ts
import { defineStore } from 'pinia'
import outlit from '@outlit/browser'

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

  actions: {
    async login(email: string, password: string) {
      const user = await api.login(email, password)
      this.user = user

      // Identify user after login
      outlit.identify({
        email: user.email,
        userId: user.id,
        traits: {
          name: user.name,
          plan: user.plan
        }
      })
    },

    logout() {
      this.user = null
      outlit.clearUser()
    }
  }
})

​
SSR with Nuxt

For Nuxt applications, see the dedicated Nuxt integration guide.

​
Journey Stage Events

Track user lifecycle events: 
<script setup>
import outlit from '@outlit/browser'
import { onMounted } from 'vue'

onMounted(() => {
  // After onboarding completion
  outlit.activate({ flow: 'onboarding' })
})

function handleSubscribe(plan: string) {
  outlit.paid({ plan, amount: 99 })
}
</script>
Stage methods (activate, engaged, paid, churned) require the user to be identified first using identify() or setUser().
Handle user consent before tracking: 
<script setup>
import { ref, onMounted } from 'vue'
import outlit from '@outlit/browser'

const showBanner = ref(false)

onMounted(() => {
  // Initialize without auto-tracking
  outlit.init({
    publicKey: import.meta.env.VITE_OUTLIT_KEY,
    autoTrack: false
  })

  // Check if user has already consented
  const hasConsent = localStorage.getItem('tracking-consent')
  if (hasConsent === 'true') {
    outlit.enableTracking()
  } else {
    showBanner.value = true
  }
})

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

<template>
  <div v-if="showBanner" class="cookie-banner">
    <p>We use cookies to improve your experience.</p>
    <button @click="acceptTracking">Accept</button>
  </div>
</template>

​
TypeScript Support

Full TypeScript support is included: 
import outlit, {
  type OutlitOptions,
  type BrowserTrackOptions,
  type BrowserIdentifyOptions
} from '@outlit/browser'

// Type-safe initialization
const options: OutlitOptions = {
  publicKey: import.meta.env.VITE_OUTLIT_KEY,
  trackPageviews: true,
  flushInterval: 5000
}

outlit.init(options)

// Type-safe tracking
outlit.track('purchase_completed', {
  orderId: 'ord_123',
  amount: 99.99,
  currency: 'USD'
})

​
Next Steps

Nuxt Integration

Use Outlit with Nuxt 3

Server-Side Tracking

Track events from your backend

Identity Resolution

Learn how profiles are merged

NPM Package

Full API reference