Vue

Vue needs one snippet in the <head> of your HTML entry file. Route changes are tracked automatically when you use Vue Router’s default history mode.

1. Get your snippet

Each site has its own snippet with a unique script URL. Copy the exact one from your dashboard’s Install step — it carries your site’s ID in place of wa-XXXXXXXX.

2. Add it to your HTML entry file

In a Vite project, open index.html at the project root and paste the snippet inside <head> (in a Vue CLI project it’s public/index.html — same idea):

<!-- index.html -->
<head>
  <!-- …your existing meta and title tags… -->

  <!-- Privacy-friendly analytics by Wazlytics -->
  <script async src="https://wazlytics.com/js/wa-XXXXXXXX.js"></script>
  <script>
    window.wazlytics = window.wazlytics || function(){(wazlytics.q = wazlytics.q || []).push(arguments)};
    wazlytics.init = wazlytics.init || function(o){ wazlytics.o = o || {} };
    wazlytics.init()
  </script>
</head>

Route changes

Vue Router’s default history mode (createWebHistory) navigates through the browser’s History API, which Wazlytics watches automatically — so every route change records a pageview with no extra code. See Single-page apps.

Tip

Using hash mode (createWebHashHistory, with URLs like /#/about)? Turn on hash routing so each hash change counts — change the init call in your snippet to:

wazlytics.init({ hashBasedRouting: true })

Track custom events

Call wazlytics() from any component or composable to record actions:

wazlytics('Signup', { props: { plan: 'pro' } })

The tracking script reference covers the full event API and manual tagging.

Verify

Run or deploy your app, open Realtime in Wazlytics, and load a page — your visit should appear within a few seconds. If nothing shows up, the troubleshooting guide covers the usual causes.