`page:loading:end` and `page:finish` called twice when navigating to nested routes
Hello, I'm using
nuxt-umami module that uses page:finish hook to track page view event. I noticed that my nested pages trigger this event twice.
My pages structure looks like this:
where the parent.vue is just:
(as described in docs here: https://nuxt.com/docs/guide/directory-structure/pages#nested-routes)
If I don't use parent.vue, the hook is called only once, but I lose parent's NuxtLink active class when I'm on nested route.
Here's a minimal reproduction of this issue: https://stackblitz.com/edit/github-rdxp1rub?file=app.vue (try to navigate between Home and Parent A and watch console log)
Could anyone confirm if this is a bug or if I'm using nested routes wrong? Thank you.2 Replies
Hi @Remmy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the knowledge sources, I can confirm that this behavior is related to how Nuxt handles nested routes and page transitions. Let me explain the situation and provide some context.
The behavior you're experiencing is likely not a bug, but rather a consequence of how Nuxt handles nested routes and page transitions. The
page:finish and page:loading:end hooks are indeed being called twice in your case due to the nested structure of your routes.
This behavior is related to the way Nuxt handles page transitions and component mounting. When you navigate to a nested route, Nuxt first mounts the parent component and then the child component, which can trigger these hooks multiple times.
There are a couple of relevant pieces of information from the knowledge sources:
1. Nuxt Hooks documentation mentions that the page:finish hook is "Called on Suspense resolved event." This suggests that the hook is tied to the resolution of asynchronous components, which can happen multiple times in a nested route structure.
2. A similar issue was reported and fixed in this pull request, which addressed calling page:loading:end only once with nested pages. However, this fix might not cover all scenarios, especially with custom nested route structures like yours.
To address this issue, you have a few options:
1. You could modify your nuxt-umami module to be aware of nested routes and only trigger the page view event once per navigation, regardless of how many times the hook is called.
2. You could use a different hook or combination of hooks to track page views more accurately. For example, you might consider using the page:transition:finish hook, which is called "After page transition onAfterLeave event."
3. If you don't need the parent component for anything other than maintaining the active class on NuxtLinks, you might consider using a different approach to achieve this, such as custom route matching in your NuxtLink components.
It's worth noting that the Nuxt team is continuously working on improving these behaviors. You might want to check the latest Nuxt documentation or consider reporting this specific case to the Nuxt GitHub repository for further guidance or potential fixes in future releases.
Nuxt Hooks documentation
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@198712740456431616> Kapa.ai is still learning and improving, please let me know how I did by reacting below.