Vue.js Integration

​

Before you start

• Set the program website in AgentRef to the same root domain your Vue app serves.
• Copy the exact script snippet from Settings -> Integration.
• If your marketing site and checkout app live on different subdomains, install on both when both can start the conversion path.

​

Recommended installation

<!-- index.html -->
<script
  defer
  src="https://www.agentref.co/api/tracking/script.js?pid=YOUR_PROGRAM_ID"
></script>

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

if (!document.querySelector('script[src*="/api/tracking/script.js"]')) {
  const script = document.createElement('script');
  script.defer = true;
  script.src = 'https://www.agentref.co/api/tracking/script.js?pid=YOUR_PROGRAM_ID';
  document.head.appendChild(script);
}

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

​

Checkout compatibility in Vue

​

Notes for Vue SPAs

• AgentRef does not need to be re-mounted on route changes.
• Late-rendered Stripe elements are still instrumented automatically.
• If you use a cookie banner component, call window.AgentRef.setConsent('granted') after the visitor accepts.

​

Verify the installation

​

Troubleshooting

• window.AgentRef never appears: install the script earlier, ideally in index.html.
• Conversions are missing while clicks arrive: your Stripe session creation path still needs the Stripe guide.
• Cookies disappear between domains: use one shared root domain or install deliberately on every participating subdomain.

​

Related docs