autoTrack: umTrackView triggered twice when using multiple <NuxtPage> components (nested routes)

[ferdinandfrank]

Description

I've noticed that umTrackView is triggered twice when a page uses multiple <NuxtPage> components, e.g. when there is a parent route or template with a <NuxtPage /> and a child route that also renders <NuxtPage />.
See nested routes in the Nuxt docs for details: https://nuxt.com/docs/4.x/guide/directory-structure/app/pages#nested-routes

Steps to Reproduce

1. Enable autoTrack in nuxt-umami.
2. Create multiple nested pages with <NuxtPage /> inside its template.
3. Navigate to a child route so that both the parent and child <NuxtPage> are rendered.
4. Observe that umTrackView is called twice for a single navigation.

Expected Behavior

umTrackView should be triggered only once per completed navigation, regardless of how many <NuxtPage> components exist on the page.

Actual Behavior

When there are multiple <NuxtPage> components, umTrackView is fired twice because the page:finish hook is triggered for every ` component.

Why This Matters

This leads to duplicate view events being sent to Umami, which skews analytics data.

Possible Solution

I'm not really sure how to solve this reliably, but here are some ideas:

• Track the last route.fullPath and avoid duplicate umTrackView calls when page:finish fires multiple times for the same route.
• Debounce page:finish calls so that only the last one is used for tracking.
• Find another hook that only fires once per navigation, e.g. via Vue Router. Note that afterEach will fire before the new page title is set...

Thanks for maintaining this package! 🙏

[ferdinandfrank]

I just tested a debounce solution and it seems to work fine on my case:

let debounceTimer: ReturnType<typeof setTimeout> | null = null;

nuxtApp.hook('page:finish', () => {
    if (debounceTimer) {
        clearTimeout(debounceTimer);
    }

    debounceTimer = setTimeout(umTrackView, 250);
});

Let me know what you think and whether I should open a PR for this. 😊