Nuxt
Add Logspot 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 @logspot/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.logspot.io/lg.js',
'data-logspot-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 (@logspot/web)
Install the SDK and initialize it in a client-only plugin so it never runs during SSR:
npm install @logspot/web// plugins/logspot.client.ts
import Logspot from '@logspot/web';
export default defineNuxtPlugin(() => {
Logspot.init({
publicKey: 'YOUR_PUBLIC_KEY',
enableAutoPageviews: true,
});
});The .client suffix ensures it only loads in the browser.
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.