How do I install TapCub on Vue?

Short answer

Add the TapCub script tag once to the index.html of your Vue app. It tracks the first load and every Vue Router navigation in history mode; call tapcub.track() for events and tapcub.login() after sign-in.

Find your site key in Web analytics › Configuration › SDK code.

1. Add the script once

In a Vite project, put the tag in the <head> of index.html:

<script defer src="https://static.pathclue.com/client.js" data-site="YOUR_SITE_KEY"></script>

Do not add it again from setup() or a plugin.

The script starts in the browser by itself. Do not create or inject it again from a component; a second insert is ignored.

2. Pageviews and route changes

The first load and later route changes that use browser history are sent automatically. Vue Router with createWebHistory needs nothing more. With createWebHashHistory, add data-hash="true" to the same tag.

To send pageviews yourself, set data-auto-track="false" on the script and call tapcub.pageview() after each route finishes. Note that this also turns off automatic outbound and download clicks, Web Vitals and 404 events. See install on single-page apps.

3. Events and sign-in

tapcub.track('purchase', { revenue: 19.9 });

Call it from a click handler or a composable in the browser. In a composable, check that tapcub exists before you call it. Event names are cut at 100 characters; at most 20 properties are kept, keys are cut at 50 characters and string values at 200. Only strings, numbers and booleans are kept as values.

After sign-in, link the visitor to your user ID:

tapcub.login(userId, { plan: 'pro' }, { type: 'login' });

login comes from the identity script, so check that it exists before calling it. More in identify users.

Check it works

Local hostnames such as localhost are skipped by default, which is easy to mistake for a broken install. Test on a deployed preview or the live site, watch the browser network panel for the collect request, then follow check your installation.

Common problems

Not using Vue? See install TapCub.