Nuxt.js

Nuxt lets you register scripts globally through app.head.script in the Nuxt config, or per component with useHead. The config route is the simplest way to load OnyxMetric on every page.

Copy your tracking snippet

In OnyxMetric, open your site's Site Settings and copy the tracking script. It looks like this:

<script src="https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID" async></script>

YOUR_SITE_ID is the numeric ID of your site.

Add the snippet to Nuxt.js

Add the script to app.head.script in nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID",
          async: true,
        },
      ],
    },
  },
});

On Nuxt 2 the array is head.script at the top level of nuxt.config.js, with the same entry.

For Nuxt 3 and 4, call useHead once in app.vue:

app.vue

<script setup>
useHead({
  script: [
    {
      src: "https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID",
      async: true,
    },
  ],
});
</script>

<template>
  <NuxtPage />
</template>

Nuxt's client-side route changes are tracked automatically.

Check that it works

Load your live site and click through a few pages. Pageviews show up in the OnyxMetric dashboard within seconds.

If nothing arrives:

View the page source and search for script.js?siteId= to confirm the tag is present.
In the browser's Network tab, check that script.js returns 200 and that requests go to /api/track.
Turn off ad blockers, or proxy the script through your own domain.
Read script troubleshooting for other causes.

Track custom events

Components also run on the server, so guard with import.meta.client (process.client on Nuxt 2).

components/ActionButton.vue

<template>
  <button @click="handleAction">Track action</button>
</template>

<script setup>
function handleAction() {
  if (import.meta.client) {
    window.onyx?.event("nuxt_interaction", { detail: "User clicked the action button" });
  }
}
</script>

Troubleshooting

Missing pageviews after navigation: automatic tracking covers Nuxt's router, so test that first. If a route change is still missed, call window.onyx.pageview() from a router.afterEach hook in a client-only plugin.

Next steps

Track custom events such as signups, purchases, and clicks.
Identify users to tie sessions to accounts.
Proxy the script through your own domain to get past ad blockers.
Script attributes let you skip or mask URLs and tag events.