Beam for Vue.js

Install Beam on Vue.js

Replace YOUR_SITE_ID with your Beam site ID from the dashboard.

Add the script tag to index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Vue App</title>
    <script
      defer
      src="https://beam-privacy.com/js/beam.js"
      data-site-id="YOUR_SITE_ID">
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Place the defer script in <head> so Beam loads after your Vue app without blocking render.

Track SPA routes with Vue Router afterEach guard

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [/* your routes */],
})

// Fire a Beam pageview on every client-side navigation
router.afterEach((to) => {
  window.beam?.track?.('pageview', { path: to.fullPath })
})

export default router

Vue Router handles navigation without full page reloads. The afterEach guard fires after every route transition — keeping Beam's Top Pages report accurate across all routes.

Verify your Vue.js integration

Use this checklist after publish so you know tracking is actually live in production.

✓ Run npm run dev and open the app in a browser.
✓ Navigate between two routes using router-link components (not browser refresh).
✓ Open your Beam dashboard and confirm both paths appear in Top Pages within a minute.
✓ Check that no cookies or localStorage keys are set by the Beam script.

Why Beam works well for Vue.js

🍪

No cookie banner required

Beam is cookie-free by design — no consent UI to build, no GDPR overhead for your Vue SPA.

⚡

Sub-2KB, zero dependencies

Beam's tracking script is lighter than a single Vue component and adds no npm dependencies.

🧭

Full SPA route tracking

The afterEach guard captures every Vue Router navigation so your Top Pages report is complete.

🔒

Privacy by default

No PII, no fingerprinting, no ad-tech — just page-level metrics your team can act on.