Ability to hook in afterEach after the transition

[DaxChen]

What problem does this feature solve?

When implementing analytics with vue-router, we often rely on the router.afterEach hook. For example:

router.afterEach((to, from) => {
  ga('set', 'page', to.fullPath)
  ga('send', 'pageview')
})

However, when there is a page transition (and obviously the page transition will use mode="out-in"), the new component will wait for the old component to fade out first, but the afterEach hook was already fired.

In the about example, say the user was originally on the home page with page title "home" and clicks on the /about link:

1. The url changes immediately, and afterEach hook fires. ga called to track pageview, but got the old title "home" by calling document.title.
2. The home page fades out, and finally destroyed.
3. The about page gets mounted (and fades in), page title and other metadata get modified (in my case I'm using vue-meta

In this comment, @posva recommend using Vue.nextTick. I tried adding multiple nextTicks but doesn't work...

What does the proposed API look like?

Is it possible to perhaps dynamically register a mounted hook (without overriding original one) to the to component in afterEach?
For example:

router.afterEach((to, from) => {
  // some kind of way to get the page component
  to.$el.mounted = () => {
    ga('set', 'page', to.fullPath)
    ga('send', 'pageview')
  }
})

Or maybe add a new hook that will wait for page transition to finish, and the new component mounted?

router.afterEachMounted((to, from) => {
  ga(...)
})

Thank you all so much!!!

Dax

[posva]

There are indeed some improvements to have in the navigation cycle to allow users branch anywhere. Specifically when dealing with transitions

[DaxChen]

I wonder if there is any temporarily workarounds? Without hard-coding something like setTimout(trackingCode, transitionDuration) in router.afterEach

[studstill]

Leverage Vue.nextTick to wait for DOM updates before firing analytics events

router.afterEach((to, from) => {
  Vue.nextTick(() => {
    ga(...)
  })
})

[DaxChen]

@studstill
Thank you! In a lot of case nextTick is really useful.

However, in the case where router-view is wrapped in transition mode="out-in", router.afterEach is actually called right when the old page starts to fade out.

Even with nextTick, the ga(...) call is called one tick after the old page starts to fade out, still resulting in getting the old document.title...

[ericcirone]

Any updates on this? I'm having the same issues.

[posva]

I'm closing this in favor of #2079

[Rigo-m]

@posva sorry for hijacking this issue, hope you don't mind.

For anyone looking into this issue with nuxt 3 - vue-router stack , and trying to send events to GA after the DOM title has been updated (for example) vue-router is not where you should look into!
Instead of navigation guards, which handles navigation we need to hook into unhead to know when meta params has changed.
Heres the relevant code:

import { getActiveHead } from "unhead";

export const useHeadChange = (cb: (() => Promise<void>) | (() => void)) => {
  const lastDomRenderState = useState("unhead:dom-render-state", () => ({}));
  const head = getActiveHead();
  head?.hooks.addHooks({
    "dom:rendered": async (ctx) => {
      const stringifiedCtx = JSON.stringify(ctx);
      if (lastDomRenderState.value !== stringifiedCtx) {
        lastDomRenderState.value = stringifiedCtx;
        await cb();
      }
    },
  });
};

Use this composable in App.vue like so:

<script setup lang="ts">
useHeadChange(() => {
    console.log(document.title)
})
</script>