Vue

Installation

npm install @haya/analytics

Vue 3 (Composition API)

Initialize Haya in your main.ts before mounting the app:

// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import haya from '@haya/analytics';

haya.init(import.meta.env.VITE_HAYA_SDK_KEY, {
  sessionReplay: true,
  heatmaps: true,
  autoTrack: { clicks: true, scrolls: true, pageviews: true },
  maskInputs: true,
});

createApp(App).use(router).mount('#app');

Add your SDK key to .env:

# .env
VITE_HAYA_SDK_KEY=your_sdk_key_here

Tracking custom events in components

<script setup lang="ts">
import haya from '@haya/analytics';

function handleSignup() {
  haya.track('signup_clicked', { source: 'hero' });
}
</script>

<template>
  <button @click="handleSignup">Get started</button>
</template>

Vue Router integration

Haya automatically tracks pushState/popstate navigation. If you want to send richer pageview data using Vue Router's route metadata, add a navigation guard:

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import haya from '@haya/analytics';

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

router.afterEach((to) => {
  haya.track('pageview', {
    url: to.fullPath,
    name: to.name as string,
  });
});

export default router;

Vue 2

Initialize in main.js:

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import haya from '@haya/analytics';

haya.init(process.env.VUE_APP_HAYA_SDK_KEY, {
  sessionReplay: true,
  heatmaps: true,
  autoTrack: { clicks: true, scrolls: true, pageviews: true },
  maskInputs: true,
});

new Vue({ render: h => h(App) }).$mount('#app');

Environment variable for Vue CLI:

# .env
VUE_APP_HAYA_SDK_KEY=your_sdk_key_here