Analytics for Nuxt

Nuxt 3 gives you file-based routing, auto-imports, and server-side rendering out of the box. BetterMeter slots in with a single config line — tracking page views across Vue Router navigations without any cookies or consent banners.

Add via nuxt.config.ts

The simplest approach is injecting the tracker script globally through Nuxt's configuration. It loads on every page and tracks SPA navigations automatically.

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          defer: true,
          "data-site": "your-domain.com",
          src: "https://bettermeter.com/api/script",
        },
      ],
    },
  },
});

Or use the useHead() composable

If you prefer composable-based head management, add the tracker in your root app.vue using useHead(). This gives you reactive control — you could conditionally load analytics based on environment.

<script setup>
useHead({
  script: [
    {
      defer: true,
      "data-site": "your-domain.com",
      src: "https://bettermeter.com/api/script",
    },
  ],
});
</script>

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Proxy with Nitro server routes

Nuxt's Nitro engine lets you create server route proxies to bypass ad blockers. Add a route handler that forwards requests to BetterMeter from your own domain.

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      "/bm/s": { proxy: "https://bettermeter.com/api/s" },
      "/bm/e": { proxy: "https://bettermeter.com/api/e" },
      "/bm/p": { proxy: "https://bettermeter.com/api/p" },
    },
  },
});

Then point the tag at the proxied paths. data-api is load-bearing: without it the tracker derives its event endpoint from the script's own origin and posts to /api/e on your domain, which Nitro does not serve — the script loads and nothing is recorded.

<script defer data-site="your-domain.com" data-api="/bm/e" src="/bm/s"></script>

• 01 Works on any Nitro preset: Vercel, Cloudflare Workers, Node.js, Deno