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:

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")

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.

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.

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.

<script
  defer
  data-website-id="YOUR_TRFYX_PROJECT_ID"
  data-domain="yourdomain.com"
  src="https://app.trfyx.com/script.js"
></script>

Verify installation

Deploy the application and open the live URL.
Navigate between several client-side routes.
Check app.trfyx.com for activity in the matching project.
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.

Last modified on October 11, 2026

⌘I

Getting Started

Analytics & Insights

Behavior Analytics

Installation Guide

Goals & Attribution

Data & Sharing

Troubleshooting

Vue.js

Install Trfyx in Vue.js

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

Alternative: add the script to `index.html`

Verify installation

Troubleshooting

​Install Trfyx in Vue.js

​Add the tracker to main.js or main.ts

​Alternative: add the script to index.html

​Verify installation

​Troubleshooting

Install Trfyx in Vue.js

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

Alternative: add the script to `index.html`

Verify installation

Troubleshooting