Nuxt Analytics Without Cookies

In Nuxt, you add the Fusionaly script in nuxt.config.ts. Nuxt puts it in the <head> of every page, and Fusionaly counts every page that Vue Router opens.

Before you start

You need a Fusionaly server, with your site's domain added as a website. Fusionaly takes events only from the domains you added. See Installation.

In the examples, replace analytics.example.com with the domain of your Fusionaly server.

Add the script

1. Open nuxt.config.ts.

2. Add the script to app.head:

   nuxt.config.ts

   export default defineNuxtConfig({
     app: {
       head: {
         script: [{ src: "https://analytics.example.com/y/api/v1/sdk.js", defer: true }],
       },
     },
   });

Page changes

Vue Router in history mode changes pages with history.pushState, and Fusionaly counts a page view each time the path changes. A change to only the query string or the hash is not a new page view. Nuxt uses history mode by default. In hash mode, every page has the path /, so Fusionaly counts all of them as one page.

Skip it in development

This is optional. Fusionaly refuses events from localhost, so your own tests never count. To not load the script at all in development, put it under $production:

nuxt.config.ts

export default defineNuxtConfig({
  $production: {
    app: {
      head: {
        script: [{ src: "https://analytics.example.com/y/api/v1/sdk.js", defer: true }],
      },
    },
  },
});

Track events

Fusionaly counts page views and button clicks without any setup. To give an event your own name, use the data-fusionaly-event-name attribute. See Tracking.

Add the attribute in a template:

<button data-fusionaly-event-name="signup_clicked">Sign up</button>

A template cannot use window. For data that only the browser knows, call the SDK from a function in <script setup>:

<script setup lang="ts">
const format = ref("csv");

function exportReport() {
  window.Fusionaly?.sendCustomEvent("report_exported", { format: format.value });
}
</script>

<template>
  <button @click="exportReport">Export</button>
</template>

With TypeScript, declare the SDK in a .d.ts file that your tsconfig.json includes:

fusionaly.d.ts

declare global {
  interface Window {
    Fusionaly?: {
      sendCustomEvent(name: string, metadata?: Record<string, unknown>): void;
      sendPageView(): void;
    };
  }
}

export {};

Check that it works

1. Open your site in a normal browser window. Fusionaly skips automated browsers, such as Playwright, and browsers that send Do Not Track.
2. In the developer tools, open the network tab, and find a POST request to /x/api/v1/events. A 403 status means that your site's domain is not added as a website.
3. Open your Fusionaly dashboard. The visit shows up within about a minute.

Next steps

• Revenue Tracking: count purchases and their amounts.
• Section Tracking: count the sections that visitors see.
• Exclude your own visits: stop counting your own browser.
• AI Clients (MCP): ask Claude Code, Codex, or Cursor about your traffic.

Guides for other frameworks: Next.js, React, Astro, SvelteKit, WordPress, Shopify, Webflow, Ghost, Hugo, and the generic guide.