Vue.js Integration

Add Affonso tracking to your Vue.js application using one of these proven methods that work with Vue CLI, Vite, or any Vue 3+ setup.

Method 1: Main Entry File (Recommended)

Add the tracking script to your main file, typically main.js:

import { createApp } from 'vue';
import App from './App.vue';

// Add Affonso tracking script
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);

createApp(App).mount('#app');

Method 2: Root Component

Add the script in your root App.vue component:

<template>
  <div id="app">
    <!-- Your app content -->
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    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);
  },
};
</script>

Method 3: Index HTML

Add the script directly to your index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your Vue App</title>

    <script
      async
      defer
      src="https://affonso.io/js/pixel.min.js"
      data-affonso="YOUR_PUBLIC_PROGRAM_ID"
      data-cookie_duration="30"
    ></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>