index.html so it loads once for the whole app. Client-side navigation with Vue Router is tracked automatically, so you don’t need to hook into the router.
Before you start
- A tinyanalytics site. If you don’t have one yet, follow the Quickstart.
- Your site’s numeric site ID, from Settings → Tracking in your dashboard.
Add the snippet to index.html
A Vue project created with Vite has a single index.html at the project root. Add the snippet inside its <head>:
index.html
Client-side navigation is tracked automatically
Vue Router renders route changes on the client, and tinyanalytics records each one as a new pageview by default (data-track-spa). You don’t need to watch the route or call anything on navigation. See Track single-page apps to change this behavior.
Verify
Run or deploy your app, open it in a browser, then check Realtime in your dashboard for your visit. See Verify your setup for the full check.Your install is working when your own visit appears in Realtime in your dashboard.
Related
Install on Nuxt
A Nuxt (server-rendered Vue) app instead.
Configure the tracking script
Every
data-* option you can set.Track custom events
Send events from your components.
Verify your setup
Confirm tracking works.