Cookieless web analytics for Vue and Nuxt

Why use Noralytic with Vue and Nuxt

Vue and Nuxt apps navigate on the client, so classic page-load analytics misses most views. Noralytic reads the browser history and counts every route change.

A tiny script and no consent banner for analytics keep your Vue or Nuxt site fast and clean.

• No cookies, no local storage and no stored IP addresses, so analytics alone does not need a consent banner.
• A tracking script under 1 KB that will not slow down your pages.
• Real-time stats, top pages, sources, countries, devices, campaigns and events in one simple dashboard.
• Single-page navigation is tracked automatically, because the script follows the browser history.

What you need

• A free Noralytic account with your website added under its exact domain.
• A Vue app with an index.html, or a Nuxt project with access to nuxt.config.

How to add Noralytic to Vue and Nuxt

The tracking code is one line. The steps below show where it goes.

<script data-host="https://noralytic.com" src="https://noralytic.com/js/script.js" id="ZwSg9rf6GA" async defer></script>

1. 1
   Vue (Vite): edit index.html
   Paste the snippet inside the <head> of index.html.
2. 2
   Nuxt: edit nuxt.config
   Add the script to app.head.script as shown below.
3. 3
   Deploy and test
   Check the real-time view in Noralytic while you navigate.

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://noralytic.com/js/script.js',
          'data-host': 'https://noralytic.com',
          id: 'ZwSg9rf6GA',
          async: true,
          defer: true,
        },
      ],
    },
  },
});

Check that tracking works

1. 1
   Open your website
   Use a private browser window so extensions and your login do not interfere.
2. 2
   Open the Noralytic real-time view
   In your Noralytic dashboard, open your website and go to Realtime.
3. 3
   Look for your visit
   Your page view should appear within a few seconds. Click through a few pages to see each one counted.

Track custom events on Vue and Nuxt

Call the tracker from a component method or an event handler.

<template>
  <button @click="track">Sign up</button>
</template>

<script setup>
function track() {
  window.pa?.track({ name: 'signup' });
}
</script>

Events appear in your Events report. A value and a unit are optional, for example pa.track({ name: 'purchase', value: 49.9, unit: 'EUR' }).

Exclude your own visits and bots

To keep your numbers clean, open your website settings in Noralytic and add your own IP address under excluded IP addresses. Make sure bot filtering is enabled so known crawlers are ignored.

Troubleshooting

• Server-side rendering: access window only in the browser, for example inside event handlers or onMounted.
• Keep the id: the script finds itself by id="ZwSg9rf6GA".
• No data after a few minutes? Confirm that the domain in Noralytic matches your website exactly, and that the script appears in the page source.
• Ad blockers: some blockers hide analytics scripts. Test in a private window without extensions.
• Content Security Policy: if you use one, allow noralytic.com as a script and connection source.