Skip to content
Statsy
Sign inStart free trial

Install on Vue

Add the tag to the index.html shell of your Vue app, and turn on hash routing if your router uses it.

A Vue app built with Vite serves a single HTML shell. The tag belongs there, so it loads once for every route.

Where it goes

Open index.html in the project root and paste the tag inside <head>, above the module script that boots the app.

index.html
<head>
  <meta charset="UTF-8" />
  <title>Your startup</title>
  <script defer data-website-id="ws_XXXXXXXX" data-domain="yourstartup.com" src="https://statsy.co/js/script.js"></script>
</head>

Using Nuxt instead? It has its own config entry: see Install on Nuxt.

Confirm it works

Build, deploy, and open the site. Live shows the visitor and the page they are on. Navigate to another route and the path should update without a reload.

Hash history needs one attribute

Vue Router with createWebHistory is tracked automatically, because it navigates with history.pushState. With createWebHashHistory the path never changes, only the fragment after #, so add data-hash-routing="true" to the tag and hash changes are counted as pageviews.

Note. Pageviews carry the full URL, so /pricing and /#/pricing are different rows in the Pages report. Switching router modes later splits your history in two.

Last updated · Markdown version