Vue.js

Add the tracker to a Vue app.

Last updated June 3, 2026

Add Grometrics to Vue by initializing the web package and tracking Vue Router navigation.

Prerequisites

A Grometrics site ID from Settings > Tracking
Access to the site, theme, or app code
A way to publish the change

Steps

Install the package

Add the web tracker.

terminal

1npm install @grometrics/web

Initialize before mount

Start tracking in main.ts.

Replace YOUR_SITE_ID with your site ID from Settings > Tracking.

src/main.ts

1import { createApp } from 'vue'2import { initGrometrics } from '@grometrics/web'3import App from './App.vue'45initGrometrics({ siteId: 'YOUR_SITE_ID' })6createApp(App).mount('#app')

Track router navigation

Call the pageview helper after each Vue Router navigation.

Options / Configuration

Option	Type	Required	Description
siteId	string	✓	Your Grometrics site ID
router	object	no	Vue Router instance for SPA navigation

npm

1npm install @grometrics/web

What happens next

Open Realtime and move between routes to confirm pageviews.

Verify your setup

Install the trackerPublish the changeOpen the site in a new tabConfirm a pageview in Realtime

Troubleshooting

No event appears

Confirm the site ID matches Settings > Tracking and that the latest published code is running.

Was this page helpful?