> ## Documentation Index
> Fetch the complete documentation index at: https://agentref.co/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue.js Integration

> Install AgentRef in a Vue app and keep attribution stable across client-side navigation.

Vue works best with AgentRef when the script is installed once in the app shell instead of being recreated on every page.

## 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

<Tabs>
  <Tab title="index.html">
    For Vue apps built with Vite, install the script in the shared HTML shell.

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

  <Tab title="main.ts fallback">
    If you need a runtime install, append the script before mounting the app.

    ```ts theme={null}
    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');
    ```
  </Tab>
</Tabs>

## Checkout compatibility in Vue

| Checkout pattern                                                | Recommendation                                                                          |
| --------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
| Stripe Payment Links, Buy Buttons, or Pricing Tables            | Supported directly. Keep the script on the page that renders them.                      |
| Vue frontend calls an API that creates Stripe Checkout Sessions | Supported, but you must pass `window.AgentRef.getCheckoutMetadata()` to that API first. |
| Separate root-domain checkout                                   | Not automatic. Cookies are first-party and stay on one root.                            |

## 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

<Steps>
  <Step title="Run a real referral visit">
    Open a live affiliate link that lands on your Vue app.
  </Step>

  <Step title="Check cookies and debug output">
    Confirm `agentref_cid` and `agentref_pid`, then add `?agentref_debug=1`.
  </Step>

  <Step title="Check diagnostics">
    Use the AgentRef dashboard, tracking status endpoint, or MCP `verify_tracking` tool.
  </Step>
</Steps>

## 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](/docs/integration/stripe).
* Cookies disappear between domains: use one shared root domain or install deliberately on every participating subdomain.

## Related docs

<CardGroup cols={3}>
  <Card title="Stripe Checkout" icon="credit-card" href="/docs/integration/stripe">
    Metadata handoff for custom checkout sessions.
  </Card>

  <Card title="JavaScript Snippet" icon="code" href="/docs/tracking/javascript-snippet">
    Cookie, parameter, and DOM API reference.
  </Card>

  <Card title="Debug Mode" icon="bug" href="/docs/tracking/debug-mode">
    Runtime inspection and warnings.
  </Card>
</CardGroup>