Integrations
Vue
Add Leapio analytics to a Vue 3 app with automatic pageviews and custom events.
This guide covers Vue 3. For Nuxt, add the script in nuxt.config or a plugin; the SDK usage below is the same.
Install
npm install @leapio/webInitialize
Call leapio.init once in your app entry, before mounting:
// src/main.ts
import { createApp } from 'vue';
import leapio from '@leapio/web';
import App from './App.vue';
leapio.init({
publicKey: 'YOUR_PUBLIC_KEY',
enableAutoPageviews: true,
});
createApp(App).mount('#app');Find your public key in Project settings.
Vue Router:
enableAutoPageviewstracks history navigations automatically. If you need manual control, callleapio.pageview()from a routerafterEachhook.
Track Events
<script setup lang="ts">
import leapio from '@leapio/web';
function subscribe() {
leapio.track({ event: 'UserSubscribed', metadata: { plan: 'pro' } });
}
</script>
<template>
<button @click="subscribe">Subscribe</button>
<!-- or auto-capture with the class convention: -->
<button class="leapio-sign-up">Sign up</button>
</template>Identify Users
leapio.identify('john@doe.com', { plan: 'pro' });Call leapio.reset() on logout.
Consent (Optional)
leapio.setConsent({ analytics: true });See How Tracking and Identity Works for the consent model.
Verify It's Working
Run your dev server, navigate around, and watch events appear in the Leapio dashboard within seconds.