Call a custom function after each page change...?

[Foddy]

Hi, I’m not entirely sure if this belongs to Nuxt or the Vue Router repository. Nevertheless, I’ll try it here:

After every page change and once the page has fully loaded (using useFetch), I want to call a custom tracking function (similar to GTM-DataLayer pushes) that sends specific information about the current page to a server. However, it’s important that this happens after the complete loading process, as the page title and other information (which I need in the function) are dynamically loaded.

I’ve unsuccessfully tried various approaches: When I use a Nuxt middleware, it unfortunately gets called immediately before the target page is loaded. It’s similar when I do it with Router.afterEach in a custom Nuxt plugin. Then I tried to achieve this with the Nuxt hook “page:finish”. However, it seems to be triggered multiple times per page change for me, and also long before the script setup useFetch has finished.

The only thing that currently works is copying the function manually on every page in the onMounted “hook”.

Is there a more elegant way to achieve this without having to manually call/copy the whole thing on every page?

Thanks.

[huang-julien]

hey 👋 have you tried router.beforeResolve ?

[Foddy]

Hi Julien,

I just tried it also with beforeResolve – but this is unfortunately also called way too soon, even on pages without any remote data. I always get the title of the previous page :/

const router = useRouter();
router.beforeResolve(to =>
{
  console.log(document.title);
});

Maybe also worth noting: I define the title on each page in the script setup like this:

useHead({
  title: "Hello!"
});