Umami and vue router

[rene-wastics]

I have a SPA developed with Vue.js (2) and enabled router animations (router is in history mode).
When I switch from one view to another, with umami in the index.html script tag, I have a complete reload / rerendering of the page.

Is there something I could do to avoid these reloads / full page renderings?

[rene-wastics]

So, in Vue.js - similar to Angular - it is necessary to disable auto-tracking in Javascript frameworks.
In the index.html set the data-auto-track="false"

<script async defer
  src="http://mywebsite/umami.js"
  data-website-id="94db1cb1-74f4-4a40-ad6c-962362670409"
  data-auto-track="false"
></script>

In your router (i.e. router/index.js) you can track the views in the router.beforeEach method:

router.beforeEach((to, from, next) => {
  // set your website id according to your umami settings
  window.umami.trackView(to.path, null, '94db1cb1-74f4-4a40-ad6c-962362670409')
  next()
}

Hope this helps someone in a similar scenario. Let me know if you have any feedback or a better solution.

--
René

[cuiliang0302]

How to introduce umami in a vue project？
When I use the following code, the console promptswindow.umami.trackView is not a function

router.beforeEach((to, from, next) => {
  // set your website id according to your umami settings
  window.umami.trackView(to.path, null, '94db1cb1-74f4-4a40-ad6c-962362670409')
  next()
}

My vue project uses vite, which has been introduced in index.html

<script async defer
        src="XXXXXX"
        data-website-id="XXX"
        data-cache="true"
        data-auto-track="false"
        data-domains="XXXXXXXX"
>

[oliverzgy]

@v2.10

<script defer
  src="xxxxxx"
  data-website-id="xxxxxx"
  data-auto-track="false">
</script>

router.beforeEach((to, from, next) => {
  umami.track()
  next()
})