Remmy Posts - Answer Overflow

Remmy

•Created by Remmy on 1/31/2025 in #❓・help

`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:

pages
  parent
    child.vue
    index.vue
  parent.vue

pages
  parent
    child.vue
    index.vue
  parent.vue

where the parent.vue is just:

<template>
  <NuxtPage />
</template>

<template>
  <NuxtPage />
</template>

(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.

5 replies

Gaming

Programming