Add cookie-free, GDPR-compliant analytics to your Nuxt 3 app in under 2 minutes. No consent banner required. Uses the Nuxt plugin system and Vue Router's afterEach guard for full SPA route coverage.
No credit card required and setup in minutes
Replace YOUR_SITE_ID with your Beam site ID from the dashboard.
// plugins/beam.client.ts
// The .client.ts suffix ensures this runs only in the browser (not during SSR).
export default defineNuxtPlugin((nuxtApp) => {
// Inject the Beam script once on app init
const script = document.createElement('script')
script.defer = true
script.src = 'https://beam-privacy.com/js/beam.js'
script.setAttribute('data-site-id', 'YOUR_SITE_ID')
document.head.appendChild(script)
// Track SPA navigations with Vue Router afterEach
const router = useRouter()
router.afterEach((to) => {
// Wait a tick for the script to initialise on first load
nextTick(() => {
window.beam?.track?.('pageview', { path: to.fullPath })
})
})
})Nuxt auto-discovers plugins in the plugins/ directory. The .client.ts suffix tells Nuxt to skip this plugin during server-side rendering, so document and window are always available.
# Install the Beam npm package
npm install @keylightdigital/beam
# Then in plugins/beam.client.ts, import directly:
import { trackPageview } from '@keylightdigital/beam'
export default defineNuxtPlugin(() => {
const router = useRouter()
router.afterEach((to) => {
nextTick(() => trackPageview(to.fullPath))
})
})The npm package is available for teams that prefer build-tool integration. The script-tag approach above is simpler and needs no bundler changes.
Use this checklist after publish so you know tracking is actually live in production.
Beam is cookie-free by design — no consent UI to build, no GDPR overhead for your Nuxt 3 app.
The .client.ts plugin pattern keeps Beam out of SSR entirely, so your Nuxt server render is never affected.
The afterEach guard captures every Vue Router navigation in your Nuxt app so Top Pages stays accurate across all routes.
No PII, no fingerprinting, no ad-tech — just page-level metrics your team can act on.
Start free, validate your first pageview, and then scale when traffic grows.