Add Privatus Analytics to a Vue app

Add privacy-friendly analytics to a Vue 3 app with a snippet in index.html, track Vue Router history or hash navigation and send custom events from components.

View as Markdown

Add the snippet to index.html:

html

<script defer src="https://privatusstats.com/js/pa.js" data-site="pa_YOURSITEID" data-modules="engage,auto,vitals,clicks,ask"></script>

Vue Router's createWebHistory() uses history.pushState, which the tracker follows automatically. With createWebHashHistory(), add data-spa="hash" so hash changes count as pageviews.

Events#

vue

<script setup>
function download() {
  window.privatus?.track('Download', { file: 'price-list.pdf' })
}
</script>

For types on window.privatus, add the declarations from the JavaScript API page. For Nuxt, see the Nuxt guide.