How to add analytics to Nuxt

Nuxt manages the document head for you (through Unhead), so there's no index.html to edit. Declaring the script in nuxt.config.ts puts it in the server-rendered HTML of every route — including prerendered and statically generated ones — exactly once.

How to install VisitTrack on Nuxt

1. 1

   Step 1: Copy your site id

   Copy the snippet from the install step (or Settings → General) in VisitTrack. Replace SITE_ID below with your id.

2. 2

   Step 2: Add the script to nuxt.config.ts

   Attribute names with a dash need quotes. defer: true renders a bare defer attribute.

   nuxt.config.tsCopy

   export default defineNuxtConfig({
     app: {
       head: {
         script: [
           {
             src: "https://visitrack.app/tracker.js",
             defer: true,
             "data-site": "SITE_ID",
           },
         ],
       },
     },
   });

3. 3

   Step 3: Optional: read the id from runtime config

   If several environments share the code, keep the id in an environment variable and add the script from app.vue with useHead. Leave the variable empty on staging and nothing is rendered there.

   app.vueCopy

   <script setup lang="ts">
   const { public: env } = useRuntimeConfig(); // runtimeConfig.public.visitrackSiteId
   useHead({
     script: env.visitrackSiteId
       ? [{ src: "https://visitrack.app/tracker.js", defer: true, "data-site": env.visitrackSiteId }]
       : [],
   });
   </script>

4. 4

   Step 4: Deploy and open the site

   nuxi dev runs on localhost, which the tracker skips. Build and deploy (or nuxi generate), then browse the live site.

How to check VisitTrack is working on Nuxt

1. View the page source of your deployed site: the <head> contains the tracker tag with your data-site.
2. Click between two pages; the VisitTrack live view shows you, and the Pages tab lists both paths.
3. DevTools → Network shows a POST to visitrack.app/api/collect on each navigation.

Does VisitTrack track Nuxt page navigation?

Nuxt's router (Vue Router under the hood) navigates with history.pushState, which the tracker listens to — so <NuxtLink> and navigateTo() are counted as pageviews. Changing only query params isn't a new pageview, because pageviews are keyed on the pathname.

Because the head is managed per app (not per page), the same tag stays in place across navigations; Nuxt doesn't re-insert it, so there's no double counting.

How to track custom events and goals in Nuxt

Custom events run in the browser, so call them in client-side code — event handlers, onMounted, or a .client plugin. Guard with optional chaining: during SSR, window doesn't exist, and in the browser a blocker may have stopped the script.

<script setup lang="ts">
async function startTrial() {
  const { ok } = await $fetch("/api/trial", { method: "POST" });
  if (ok && import.meta.client) window.visitrack?.("trial_started", { plan: "pro" });
}
</script>

<template>
  <NuxtLink to="/pricing" data-vt-goal="pricing_cta">Pricing</NuxtLink>
</template>

Signups created in a Nitro server route can be sent from the server with POST /api/track and a secret API key — see server-side events.

Script options you might need on Nuxt

All optional — add them to the same tag. Full reference: script configuration.

Nuxt troubleshooting

Not on Nuxt? See all 29 integration guides.