Updated 20 October 2026

Vue analytics

Privacy-first, cookieless analytics for Vue: one tag in index.html, with Vue Router navigation counted for you.

In short

  • One tag in the <head> of index.html. No plugin, no build step.
  • History-mode routes are counted by themselves. Hash-mode routes need one attribute.
  • No cookie banner needed in cookieless mode, no IP address stored, and nothing loaded from another company.

Install on Vue#

Use your own site id and server address in the code below. On trckable Cloud the address is https://cloud.trckable.com.

Put the tag in the <head> of index.html (the project root in Vite, public/index.html in Vue CLI):

<script
  defer
  data-site="tkb_a1b2c3d4"
  data-domain="example.com"
  src="https://stats.example.com/js/tkb_a1b2c3d4.js">
</script>

If you would rather bundle it, install the package and call it once before you mount the app:

// src/main.ts
import { init } from 'trckable'

init({ site: 'tkb_a1b2c3d4', host: 'https://stats.example.com' })

Open your site once, then run npx trckable doctor --host https://stats.example.com --site tkb_a1b2c3d4 --url https://example.com. It only reads, and tells you whether the tag is on the page and the server answers.

What to know about Vue#

  • History mode is counted automatically. createWebHistory uses the history API, and trckable counts the route change.
  • Hash mode is one page by default. With createWebHashHistory, add data-hash to the tag and turn on Settings → General → Reports → Pages after the #.
  • Call init once, in the client. In a server-rendered Vue app, call it from client-only code such as a browser entry or onMounted, not from code that also runs on the server.
  • Goals need no code. Put data-trckable-goal="signup" on a button and the click is counted.

Goals and revenue#

A goal needs no code: put an attribute on the element and each click is counted.

<button data-trckable-goal="signup" data-trckable-goal-plan="pro">Start trial</button>

Connect Stripe, Paddle, Lemon Squeezy, Polar or Dodo Payments with one key, and each payment is credited to the visit that earned it, so revenue shows next to traffic. See revenue attribution.

Questions#

Does Vue Router need any setup?
No. History-mode navigation is counted by the tag itself. Only hash-mode apps need the data-hash attribute and the matching report setting.
Do I need a cookie banner on my Vue site?
Not for the counting itself. In cookieless mode (add data-cookieless to the tag) nothing is stored on the visitor's device and no IP address is kept. Whether your site needs a banner for other reasons is a question for your own situation; the cookie banner guide explains the rules in plain words.
Can ad blockers stop it?
A blocker can block any script, and trckable does not claim otherwise. Sending events through your own domain removes the separate analytics file a blocklist would match by name, which is the accurate setup. The same-origin proxy guide shows how.
Is it free for a Vue site?
The server is open source and free to self-host, and the tracker is MIT licensed. If you would rather not run a server, trckable Cloud runs it for you; the plans are on the pricing page.

Keep reading#

Other stacks#

Start free