Static GitHub Issues

[2644] router.afterEach => nextTick doesn't reflect whole application mount

prev: How to use js animation when the page is changing
next: nuxt generate: WARNING in asset size limit

I've been trying to select a specific element within the loaded page if it exists with a nuxt plugin similar to this:

import Vue from 'vue'

export default ({ app: { router } }) => {
  if (!process.browser) return

  router.afterEach((to, from) => {
    Vue.nextTick(() => {
      window.pageFeature = document.querySelector('#page-feature')
      console.log('trying to find pageFeature, got', window.pageFeature)
    })
  })
}

My issue is that the nextTick is firing too soon, so I find the initial #page-feature element on first load, but subsequent navigation always "lags behind" essentially.

Currently the #page-feature element is in the component that <nuxt/> renders and if I move it deeper it still can't be found - no matter where the element is placed it seems nextTick won't work in this instance.

Am I missing something specific to nuxt to find out when the whole application has finished mounting or is this a bug?

Maybe there's a better way to do this, I don't particularly want a function in each page component calling on mount - however if there is no better way to accomplish this, I will stick to this.

Thanks for your help in advance.

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2300">#c2300</a>)</em></sub></div>