Add Privacy-First Analytics to Your Vue.js App

Vue 3 apps deserve analytics that respect the framework’s philosophy: lightweight, composable, and developer-friendly. Most analytics tools fail on at least two of those. Google Analytics loads 45KB of JavaScript and requires a consent banner. Mixpanel and Amplitude are designed for product teams, not indie Vue developers who want to know which pages get traffic.

Measure.events takes a different approach: a 900-byte script, zero cookies, no consent banners required, and an MCP server so your AI coding tools can query your analytics directly.

Installation

Add the tracking script to your index.html (or your app shell):

<script
  defer
  data-site-key="YOUR_SITE_KEY"
  src="https://lets.measure.events/api/script/YOUR_SITE_KEY"
></script>

That’s it for basic page tracking. Every page load is captured automatically.

Vue Router Integration

For single-page apps using Vue Router, you need to track route changes since the page doesn’t reload on navigation. Create a composable:

// composables/useAnalytics.js
import { watch } from 'vue'
import { useRoute } from 'vue-router'

export function useAnalytics() {
  const route = useRoute()

  watch(
    () => route.fullPath,
    (path) => {
      // Measure.events auto-tracks if the script is loaded
      // For SPAs, trigger a pageview on route change
      if (window.measure) {
        window.measure.trackPageview({ path })
      }
    }
  )
}

Use it in your App.vue:

<script setup>
import { useAnalytics } from './composables/useAnalytics'
useAnalytics()
</script>

Custom Event Tracking

Track user interactions with custom events:

// Track a signup
window.measure?.track('signup', { plan: 'pro' })

// Track a form submission
window.measure?.track('contact_form', { source: 'pricing_page' })

Wrap it in a composable for cleaner usage:

// composables/useTrack.js
export function useTrack() {
  return {
    track(event, data = {}) {
      window.measure?.track(event, data)
    }
  }
}

SSR Considerations (Nuxt users, see our Nuxt guide)

If you’re using Vue with SSR (Vite SSR, Quasar, or a custom setup), the tracking script should only load client-side. The defer attribute handles this in most cases, but if you’re injecting scripts programmatically:

// Only run client-side
if (typeof window !== 'undefined') {
  const script = document.createElement('script')
  script.defer = true
  script.dataset.siteKey = 'YOUR_SITE_KEY'
  script.src = 'https://lets.measure.events/api/script/YOUR_SITE_KEY'
  document.head.appendChild(script)
}

Why Not Google Analytics?

Three reasons Vue developers switch:

1. Size. GA4 loads 45KB+ of JavaScript. Measure.events loads 900 bytes. For Vue apps where you’ve optimized every component import, a 45KB analytics script is absurd.

2. Privacy. GA4 requires cookie consent banners in the EU. Measure.events uses no cookies and doesn’t track personally identifiable information. No banner needed.

3. Developer experience. Measure.events has an MCP server. Ask Cursor or Claude “what are my top pages this week?” and get a real answer from your actual data. GA4 gives you a dashboard you have to click through manually.

MCP Server for AI-Powered Analytics

This is where Measure.events is genuinely different. Install the MCP server and your AI coding tools can query your analytics:

"What pages are getting the most traffic?"
"Show me referrer sources for the last 7 days"
"Has traffic increased since I launched the new landing page?"

No other analytics tool offers this. For Vue developers already using Cursor, Windsurf, or Claude Code, your analytics become part of your development workflow instead of a separate tab you forget to check.

Getting Started

1. Sign up at lets.measure.events
2. Add your site and get your site key
3. Drop the script tag into your index.html
4. Add the Vue Router composable for SPA tracking
5. Optional: set up the MCP server for AI-powered queries

Total setup time: under 5 minutes. Total JavaScript added to your bundle: 0 bytes (the script loads externally with defer).