Nuxt
Add Leapio analytics to a Nuxt 3 app with automatic pageviews and custom events.
This guide covers Nuxt 3. The fastest setup is the script tag via nuxt.config; for typed, programmatic tracking use the @leapio/web SDK in a client plugin.
Option A — Script Tag (nuxt.config)
Add the script through app.head.script so Nuxt injects it on every page:
// nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
script: [
{
src: 'https://cdn.leapio.com/lg.js',
'data-leapio-pk': 'YOUR_PUBLIC_KEY',
async: true,
},
],
},
},
});Find your public key in Project settings. Pageviews are captured automatically, including Vue Router client-side navigations.
Option B — SDK (@leapio/web)
Install the SDK and initialize it in a client-only plugin so it never runs during SSR:
npm install @leapio/web// plugins/leapio.client.ts
import leapio from '@leapio/web';
export default defineNuxtPlugin(() => {
leapio.init({
publicKey: 'YOUR_PUBLIC_KEY',
enableAutoPageviews: true,
});
});The .client suffix ensures it only loads in the browser.
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.