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.

• 01 Create server/routes/bm/script.get.ts that proxies to bettermeter.com/api/script
• 02 Create server/routes/bm/event.post.ts that proxies to bettermeter.com/api/event
• 03 Update the script src to /bm/script — requests now come from your origin
• 04 Works on any Nitro preset: Vercel, Cloudflare Workers, Node.js, Deno