bug afterNavigation

[ricardogobbosouza]

Setup two pages with Nuxt.js:

<!-- pages/page1.vue -->
<template>
  <div>
    <h1 class="title">Page 1</h1>

    <div class="links">
      <nuxt-link to="page1">Page 1</nuxt-link>
      <nuxt-link to="page2">Page 2</nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: 'Page 1',
      afterNavigation(metaInfo) {
        console.log(metaInfo.title) // Page 2
      }
    };
  },
}
</script>

<!-- pages/page2.vue -->
<template>
  <div>
    <h1 class="title">Page 2</h1>

    <div class="links">
      <nuxt-link to="page1">Page 1</nuxt-link>
      <nuxt-link to="page2">Page 2</nuxt-link>
    </div>
  </div>
</template>


<script>
export default {
  head() {
    return {
      title: 'Page 2',
      afterNavigation(metaInfo) {
        console.log(metaInfo.title) // Page 1
      }
    };
  },
}
</script>

Expected behavior:
Page 1 will track "Page 1" as title
Page 2 will track "Page 2" as title

Actual behavior:
Page 1 & Page 2 tracks title correctly during initial load
Page 2 tracks "Page 1" when changing route from Page 1 -> Page 2
Page 1 tracks "Page 2" when changing route from Page 2 -> Page 1

[pimlie]

Could you please try to add afterNavigation on a higher level component (eg the layout) or in your nuxt.config?

[ricardogobbosouza]

Sure, I'll try

[ricardogobbosouza]

Its same

[ricardogobbosouza]

// pages/page1.vue
<template>
  <div>
    <h1 class="title">Page 1</h1>

    <div class="links">
      <nuxt-link to="page1">Page 1</nuxt-link>
      <nuxt-link to="page2">Page 2</nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: 'Page 1',
    };
  },
}
</script>

// pages/page2.vue
<template>
  <div>
    <h1 class="title">Page 2</h1>

    <div class="links">
      <nuxt-link to="page1">Page 1</nuxt-link>
      <nuxt-link to="page2">Page 2</nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: 'Page 2',
    };
  },
}
</script>

// nuxt.config.js

export default {
    head() {
        return {
            afterNavigation(metaInfo) {
                console.log(metaInfo.title)
            }
        }
    }
}

[pimlie]

Hmm, could you try to add the following in your nuxt.conf:

  vueMeta: { refreshOnceOnNavigation: true }

and validate the option has changed by running window.$nuxt.$meta().getOptions() in the browser console.

[ricardogobbosouza]

Its same with vueMeta: { refreshOnceOnNavigation: true }
browser log:

attribute: "data-n-head"
contentKeyName: "content"
debounceWait: 10
keyName: "head"
metaTemplateKeyName: "template"
refreshOnceOnNavigation: true
ssrAppId: "ssr"
ssrAttribute: "data-n-head-ssr"
tagIDKeyName: "hid"
waitOnDestroyed: true

[pimlie]

Hmm, it seems that in Nuxt the vue-router afterEach guard is called before the new page component is fully mounted. Probably related to transitions, I can only fix it with features.transitions: false and a nextTick in afterNavigation. Not sure why the nextTick is needed though.

[ricardogobbosouza]

Yeap...its works if add nextTick here https://github.com/nuxt/vue-meta/blob/master/src/shared/nav-guards.js#L21 and disable features.transitions

[jeissler]

I'm really interested in this issue as I'm facing something similar; ie- meta title not being in sync w/ actual page reporting in analytics. The catch is I'm not using Nuxt but a CLI 3 SSR build. Vue-meta has worked great for the most part (been using a while) but this bug has thrown me for a bit of a loop—I've tried the referenced code on master branch w/o success; my 'off-by-one' page titles persist :( So I'm now wondering what features.transitions: false actually does inside Nuxt and how that might translate to a vanilla build? Any help/ideas are much appreciated as my other options aren't ideal and we have a lot of pages using meta.

[pimlie]

@jeissler Did you set refreshOnceOnNavigation: true? Cause then vue-meta uses a nextTick in an afterEach guard. Check the vue-router flow here to understand why the nexttick is needed: https://router.vuejs.org/guide/advanced/navigation-guards.html#the-full-navigation-resolution-flow

The transition: false property in Nuxt just disable page transitions on navigation, Nuxt waits for the page transition to finish navigation but thats independent of vue-router which means the nexttick is not enough because a transition often takes 500ms. And only after that 500ms the title will be updated.

[jeissler]

@pimlie Thanks very much; I'm not sure why I hadn't tried that alone before going thru other possible causes/solutions... This may have just fixed the worst of the issues I'm experiencing w/ analytics; I'll keep checking and report back. Many thanks!

[Deckluhm]

@pimlie I have the exact same issue than @jeissler (trying to report to GA but always got previous page title) but I'm using Nuxt (universal mode, every standard setup).

I tried to set refreshOnceOnNavigation: true but I don't understand where I'm supposed to set features.transitions: false? Is that the same thing than transition: false inside a Nuxt component?

I can't find any docs about features.transitions anywhere.

[pimlie]

Features is still considered experimental though, but should work for transitions.

// nuxt.config.js
export default {
  features: {
    transitions: false
  },
  vueMeta: {
    refreshOnceOnNavigation: true
  }
}

[kozulenko-d]

@pimlie Is the date of the next release that includes this feature known? Maybe somewhere there is a schedule of upcoming releases?