Vue.js

Quickstart

Human Behavior works seamlessly to record sessions on your Vue.js app.

Step 1: Installation

npm install humanbehavior-js
# or
yarn add humanbehavior-js

Step 2: Environment Variables

Create an environment file (.env) with your API key:

VITE_HUMANBEHAVIOR_API_KEY=your-api-key-here

Important: For Vite-based Vue projects, environment variables must start with VITE_ to be accessible in the browser.

Step 3: Create HumanBehavior Composable

Create src/composables/useHumanBehavior.ts:

import { HumanBehaviorTracker } from 'humanbehavior-js'

export function useHumanBehavior() {
  const apiKey = import.meta.env.VITE_HUMANBEHAVIOR_API_KEY
  
  if (apiKey) {
    const tracker = HumanBehaviorTracker.init(apiKey)
    
    return { tracker }
  }
  
  return { tracker: null }
}

Step 4: Initialize in Router

Update src/router/index.ts:

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import { useHumanBehavior } from '@/composables/useHumanBehavior'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
    },
  ],
})

// Initialize HumanBehavior
const { tracker } = useHumanBehavior()

export default router

Step 5: Use in Components

Now you can use HumanBehavior in any Vue component:

<template>
  <div class="about">
    <h1>About Page</h1>
    <button @click="handleClick">Test HumanBehavior</button>
    <router-link to="/">Go to Home</router-link>
  </div>
</template>

<script setup lang="ts">
import { useHumanBehavior } from '@/composables/useHumanBehavior'

const { tracker } = useHumanBehavior()

function handleClick() {
  tracker?.customEvent('button_clicked', { button: 'test' })
}

function identifyUser() {
  tracker?.identifyUser({ 
    userProperties: { email: 'user@example.com' } 
  })
}
</script>

Alternative: Provide/Inject Pattern

If you prefer to use Vue's provide/inject system instead of composables:

Initialize in main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { HumanBehaviorTracker } from 'humanbehavior-js'

const app = createApp(App)

const apiKey = import.meta.env.VITE_HUMANBEHAVIOR_API_KEY
if (apiKey) {
  const tracker = HumanBehaviorTracker.init(apiKey)
  app.provide('humanBehavior', tracker)
}

app.mount('#app')

Inject in Components

<script setup lang="ts">
import { inject } from 'vue'

const tracker = inject('humanBehavior')

function handleClick() {
  tracker?.customEvent('button_clicked')
}
</script>

That's it! The SDK now automatically tracks user interactions, navigation, and console events. Everything past here is optional.

Features

Vue 3 Composition API support
Composable-based architecture
Provide/inject pattern support
Automatic session recording
Custom event tracking
User identification
TypeScript support included

Troubleshooting

Check browser console for any error messages
Verify your API key is correct and starts with VITE_
Ensure the tracker is initialized before any user interaction
Make sure .env is in your project root directory
For Vue CLI projects, use VUE_APP_ prefix instead of VITE_

Vue.js

On this page