Analytics for Vue

Vue 3 with Vite is one of the fastest development setups available. BetterMeter adds analytics without slowing it down — a single script tag in your index.html, automatic Vue Router navigation tracking, and zero cookies or consent banners.

Add the script to index.html

The tracker lives outside the Vue component tree. It doesn't need to be a plugin, directive, or composable — just a script tag that runs independently of Vue's reactivity system.

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <script
      defer
      data-site="your-domain.com"
      src="https://bettermeter.com/api/script"
    ></script>
  </body>
</html>

Custom event composable

For tracking specific user actions — button clicks, form submissions, feature usage — create a thin composable that wraps the global tracker function. This keeps your analytics calls idiomatic Vue.

composables/useAnalytics.ts

export function useAnalytics() {
  function trackEvent(name: string, props?: Record<string, string>) {
    window.bettermeter?.(name, props);
  }

  return { trackEvent };
}

// Usage in a component:
// const { trackEvent } = useAnalytics();
// trackEvent("add_to_cart", { product: "pro-plan" });

Vue Router integration

01 Automatic detection — BetterMeter listens for History API changes. Vue Router's router.push() and <RouterLink> navigations are tracked without any extra code.
02 Hash mode support — If you use createWebHashHistory(), hash changes are tracked as distinct page views.
03 Nested routes — Each URL change triggers a page view, even within nested <RouterView> components.
04 No router guard needed — You don't need router.afterEach() hooks. The tracker handles it at the browser level.

Vue 3 + Vite

Modern stack ready

Vue Router

Auto SPA tracking

Composables

Idiomatic custom events

No Cookies

GDPR-compliant

AI Traffic

Detect AI visitors

< 1 KB

Tiny tracker

Analytics for Angular →

Documentation

Read the Docs →