Vue.js

Add attribu.tech to your Vue.js project.

Method 1: Add to index.html (recommended)

Add the script tag to the <head> of your index.html:

<!-- index.html -->
<head>
  <!-- ... other tags ... -->
  <script
    defer
    data-website-id="YOUR_SITE_ID"
    data-domain="yourdomain.com"
    src="https://attribu.tech/js/script.js"
  ></script>
</head>

Replace YOUR_SITE_ID with your actual Website ID from attribu.tech. Replace yourdomain.com with your website's root domain.

This works with both Vue CLI (public/index.html) and Vite (index.html at project root).

Method 2: Dynamic injection in main.js

If you prefer to load the script programmatically, add the following to your entry file:

// main.js or main.ts
import { createApp } from "vue";
import App from "./App.vue";

const script = document.createElement("script");
script.defer = true;
script.dataset.websiteId = "YOUR_SITE_ID";
script.dataset.domain = "yourdomain.com";
script.src = "https://attribu.tech/js/script.js";
document.head.appendChild(script);

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

SPA route changes

The tracking script automatically detects client-side navigations via the History API. Route changes in Vue Router are tracked without any extra configuration.

Verify installation

Start your Vue app locally or deploy it.
Open your browser's Developer Tools and check the Network tab for a request to /js/script.js and a POST to /api/events.
Check your attribu.tech dashboard for incoming pageviews.

What's next

Custom events - Track signups, button clicks, and other actions.
Stripe integration - Attribute revenue to traffic sources.
Script options - Configure advanced tracking behavior.