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>