Skip to main content

​
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, undefined, { 
      logLevel: 'debug' 
    })
    
    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, undefined, { 
    logLevel: 'debug' 
  })
  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_