How to add analytics to a Vue app

A Vite-based Vue 3 project (what npm create vue@latest scaffolds) has a single index.html at the project root. That file is the page shell for every route, so the tag goes there once — not in App.vue, and not in a plugin. Using Nuxt? Follow the Nuxt guide, which configures the head in nuxt.config.ts.

How to install VisitTrack on Vue

1. 1

   Step 1: Copy your site id

   From the install step when you add a site (or Settings → General), copy the snippet. SITE_ID below is the placeholder for your id.

2. 2

   Step 2: Add the tag to index.html

   Inside <head>, before your app's module script. On an older Vue CLI (webpack) project, the file is public/index.html.

   index.htmlCopy

   <!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>My Vue app</title>
       <script defer data-site="SITE_ID" src="https://visitrack.app/tracker.js"></script>
     </head>
     <body>
       <div id="app"></div>
       <script type="module" src="/src/main.ts"></script>
     </body>
   </html>

3. 3

   Step 3: Check your router mode

   Open src/router/index.ts. If it uses createWebHistory(), you're done. If it uses createWebHashHistory(), read the navigation section below.

   src/router/index.tsCopy

   import { createRouter, createWebHistory } from "vue-router";
   
   export default createRouter({
     history: createWebHistory(import.meta.env.BASE_URL), // tracked per route
     routes,
   });

4. 4

   Step 4: Deploy and browse

   Run npm run build, deploy the dist folder and open the live URL. The dev server on localhost is ignored on purpose.

How to check VisitTrack is working on Vue

1. On the deployed app, navigate between two routes with <RouterLink>s.
2. Your VisitTrack live view shows an active visitor within seconds; the Pages tab lists both paths.
3. In DevTools → Network you'll see one POST to visitrack.app/api/collect per route change.

Does VisitTrack track Vue page navigation?

Vue Router's web history calls history.pushState on every navigation; the tracker wraps it (and replaceState, and listens for popstate), so <RouterLink>, router.push() and back/forward each create a pageview. Pageviews are keyed on the pathname, so router.replace({ query: { sort: "new" } }) isn't counted as a new page.

With createWebHashHistory() the route lives after # and the pathname stays /, so route changes aren't separate pageviews. Either switch to createWebHistory() (your host must rewrite unknown paths to index.html), or send a custom event from a global afterEach hook as shown below.

// Only for hash-mode routers: one event per screen.
router.afterEach((to) => {
  window.visitrack?.("screen_view", { screen: String(to.name ?? to.path) });
});

How to track custom events and goals in Vue

In any component, call window.visitrack(name, props) once the action succeeds. In templates, data-vt-goal works on any element because it's a plain attribute — Vue passes it through to the DOM.

<script setup lang="ts">
async function subscribe(email: string) {
  const res = await fetch("/api/subscribe", { method: "POST", body: JSON.stringify({ email }) });
  if (res.ok) window.visitrack?.("newsletter_signup", { location: "footer" });
}
</script>

<template>
  <a href="/pricing" data-vt-goal="pricing_cta">See pricing</a>
  <section data-vt-scroll="testimonials_viewed">…</section>
</template>

For TypeScript, declare window.visitrack once in an env.d.ts (same declaration as in the React guide). Then turn any event into a goal in Settings → Goals.

Script options you might need on Vue

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

Vue troubleshooting

Not on Vue? See all 29 integration guides.