Analytics for Nuxt: Setup Guide

Nuxt is the Vue.js meta-framework, analogous to Next.js for React. Adding analytics to Nuxt requires handling both initial page loads and client-side navigation — the same challenge as other SPA frameworks.

Nuxt basics: how routing works

Nuxt (v3+) uses file-based routing in the pages/ directory. When a visitor navigates between pages, Nuxt updates the DOM without triggering a full page reload.

Like Next.js and SvelteKit, you need analytics that captures every pageview, not just the initial load. The official @antlytics/nuxt module (and the hosted tracker.js) do this via History API patches and popstate.

Recommended: `@antlytics/nuxt` module

The cleanest approach is the official Nuxt module. It injects the hosted tracker and handles SPA navigations for you.

Step 1: Install

npm install @antlytics/nuxt
# or
pnpm add @antlytics/nuxt

Step 2: Register the module in nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@antlytics/nuxt'],
  antlytics: {
    trackingId: 'YOUR_TRACKING_ID',
  },
})

Replace YOUR_TRACKING_ID with your actual UUID from Settings → Tracking Snippet in your Antlytics dashboard.

The module injects the hosted tracker.js, which:

Sends a pageview on initial load
Tracks SPA navigations (pushState / replaceState / popstate)
Uses a 30-minute idle visit timeout with sticky first-touch UTMs
Sends engagement beacons (scroll depth + active time)

Full options (including apiHost for a first-party proxy) are in the Nuxt docs.

Alternative: hosted script via `app.head`

If you prefer not to install a package, add the hosted tracker in nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://www.antlytics.com/tracker.js',
          defer: true,
          'data-tracking-id': 'YOUR_TRACKING_ID',
          'data-api-host': 'https://www.antlytics.com',
        },
      ],
    },
  },
})

Or paste the same snippet into a layout using a plain script tag — see Quick start.

<script
  defer
  src="https://www.antlytics.com/tracker.js"
  data-tracking-id="YOUR_TRACKING_ID"
  data-api-host="https://www.antlytics.com"
></script>

Verifying it works

Start your Nuxt dev server (npm run dev or pnpm dev).
Open browser dev tools → Network tab.
Navigate between pages.
Look for the tracker.js script load and POST requests to api/ingest/pageview on each navigation.
Check your Antlytics dashboard for new pageviews.

Nuxt 3 specifics

This guide is written for Nuxt 3+ (the current stable major version). Prefer @antlytics/nuxt on Nuxt 3. If you're on Nuxt 2, use the hosted script tag approach instead.

First-party proxy with Nuxt

To route analytics requests through your own domain (avoiding ad blocker filtering), set apiHost to your domain and add a Nuxt server route that forwards to Antlytics. See First-party proxy for the full pattern.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@antlytics/nuxt'],
  antlytics: {
    trackingId: 'YOUR_TRACKING_ID',
    apiHost: 'https://your-domain.com',
  },
})

FAQ

Does this work with Nuxt's SSR mode? Yes. The module and hosted tracker run in the browser after hydration. SSR handles the initial HTML; the tracker handles client-side analytics.

Does this work with Nuxt's static generation mode? Yes. Statically generated pages are served as HTML and hydrated by Vue in the browser. The tracker runs after load and tracks navigations.

Should I write a custom client plugin that posts to /api/ingest/pageview? No. Prefer @antlytics/nuxt or the hosted tracker.js. Hand-rolled IIFEs miss History API patches, engagement, and other tracker behaviour that ships with the official install.