Integrations
Vue
Add Logspot 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 @logspot/webInitialize
Call Logspot.init once in your app entry, before mounting:
// src/main.ts
import { createApp } from 'vue';
import Logspot from '@logspot/web';
import App from './App.vue';
Logspot.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, callLogspot.pageview()from a routerafterEachhook.
Track Events
<script setup lang="ts">
import Logspot from '@logspot/web';
function subscribe() {
Logspot.track({ event: 'UserSubscribed', metadata: { plan: 'pro' } });
}
</script>
<template>
<button @click="subscribe">Subscribe</button>
<!-- or auto-capture with the class convention: -->
<button class="lgspt-sign-up">Sign up</button>
</template>Identify Users
Logspot.identify('john@doe.com', { plan: 'pro' });Call Logspot.reset() on logout.
Consent (Optional)
Logspot.setConsent({ analytics: true });See How Tracking & Identity Works for the consent model.
Verify It's Working
Run your dev server, navigate around, and watch events appear in the Logspot dashboard within seconds.