Nuxt.js Integration

Implement Affonso tracking in your Nuxt.js 3+ application with these methods designed for SSR, static generation, and client-side hydration.

Method 1: App HTML (Recommended)

Create or update your app.html file in the root directory:

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
    <script
      async
      defer
      src="https://affonso.io/js/pixel.min.js"
      data-affonso="YOUR_PUBLIC_PROGRAM_ID"
      data-cookie_duration="30"
    ></script>
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

Method 2: Nuxt Config

Add the script via nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          async: true,
          defer: true,
          src: 'https://affonso.io/js/pixel.min.js',
          'data-affonso': 'YOUR_PUBLIC_PROGRAM_ID',
          'data-cookie_duration': '30',
        },
      ],
    },
  },
});

Method 3: Plugin (Dynamic Loading)

Create a plugin at plugins/affonso.client.ts:

export default defineNuxtPlugin(() => {
  if (process.client) {
    const script = document.createElement('script');
    script.async = true;
    script.defer = true;
    script.setAttribute('data-affonso', 'YOUR_PUBLIC_PROGRAM_ID');
    script.setAttribute('data-cookie_duration', '30');
    script.src = 'https://affonso.io/js/pixel.min.js';
    document.head.appendChild(script);
  }
});