Vue.js

Add OpenRevenue analytics to your Vue 3 or Nuxt app.

Via index.html

The quickest way: add the script to your index.html before </body>:

index.html

<body>  <div id="app"></div>   <script    src="https://api.openrevenue.com/tracker.js"    data-site="your-project-id"    defer  ></script></body>

<body>  <div id="app"></div>   <script    src="https://api.openrevenue.com/tracker.js"    data-site="your-project-id"    defer  ></script></body>

Via Vue plugin

For Vue Router apps, register a simple plugin in main.ts so pageviews are tracked on every route change:

main.ts

import { createApp } from "vue"import { createRouter } from "vue-router"import App from "./App.vue"import { API_URL } from "@/lib/urls" const router = createRouter({ /* your routes */ }) const app = createApp(App)app.use(router) // Load tracker onceconst script = document.createElement("script")script.src = "https://api.openrevenue.com/tracker.js"script.dataset.site = "your-project-id"script.defer = truedocument.head.appendChild(script) app.mount("#app")

import { createApp } from "vue"import { createRouter } from "vue-router"import App from "./App.vue"import { API_URL } from "@/lib/urls" const router = createRouter({ /* your routes */ }) const app = createApp(App)app.use(router) // Load tracker onceconst script = document.createElement("script")script.src = "https://api.openrevenue.com/tracker.js"script.dataset.site = "your-project-id"script.defer = truedocument.head.appendChild(script) app.mount("#app")

ℹ

OpenRevenue's tracker automatically listens to history.pushState and popstate so route changes in Vue Router are tracked without any extra config.

Verify

Deploy your app and visit it in a browser. A pageview should appear in your OpenRevenue dashboard within seconds.

ℹ

OpenRevenue ignores localhost automatically. Always test on your deployed URL.