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

# Vue.js

> Install Trfyx in a Vue.js application.

# Install Trfyx in Vue.js

Add the Trfyx tracker from your application's main entry point so it loads once for the whole Vue application.

## Add the tracker to `main.js` or `main.ts`

Open your main entry file and add the tracker before mounting the Vue app:

```ts theme={null}
import { createApp } from "vue"
import App from "./App.vue"

const script = document.createElement("script")
script.defer = true
script.src = "https://app.trfyx.com/script.js"
script.setAttribute("data-website-id", "YOUR_TRFYX_PROJECT_ID")
script.setAttribute("data-domain", "yourdomain.com")
document.head.appendChild(script)

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

<Warning>
  Replace `YOUR_TRFYX_PROJECT_ID` with the Website ID from your Trfyx project and `yourdomain.com` with the domain you want to track. Keep the script URL as `https://app.trfyx.com/script.js`.
</Warning>

<Tip>
  Install the tracker in the main entry point or shared HTML shell. Do not inject it from individual Vue components; components can mount more than once and create duplicate tracking.
</Tip>

## Alternative: add the script to `index.html`

If your project uses a standard Vite-generated `index.html`, you can place the following inside its `<head>` instead. Use one installation method, not both.

```html theme={null}
<script
  defer
  data-website-id="YOUR_TRFYX_PROJECT_ID"
  data-domain="yourdomain.com"
  src="https://app.trfyx.com/script.js"
></script>
```

## Verify installation

1. Deploy the application and open the live URL.
2. Navigate between several client-side routes.
3. Check [app.trfyx.com](https://app.trfyx.com/) for activity in the matching project.
4. If nothing appears, inspect the browser's **Console** and **Network** tabs for blocked script or tracking requests.

## Troubleshooting

Confirm the Website ID and domain, verify that the deployed build includes the change, and check whether a Content Security Policy (CSP), consent manager, or browser extension blocks the tracker. If pageviews are duplicated, make sure the snippet appears only once.


## Related topics

- [Next.js](/nextjs-app-router.md)
- [Astro](/astro.md)
- [Podia](/podia.md)
- [Vercel v0](/vercel-v0.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.