Nuxt•8mo ago

Check whether any page has fully mounted from the root App.vue

Some of my pages have a

definePageMeta({ hideSidebar: true })

definePageMeta({ hideSidebar: true })

which sets the hideSidebar property in the pinia store to true or false the way it works currently is, in App.vue I have this code

// app.vue
const appStore = useAppStore()

nuxtApp.hook('page:finish', () => {
    appStore.hideSidebar = !!route.meta.hideSidebar
})

// app.vue
const appStore = useAppStore()

nuxtApp.hook('page:finish', () => {
    appStore.hideSidebar = !!route.meta.hideSidebar
})

However this causes flickers, for example when I reload the page, for a millisecond I see the sidebar flickering. I've tried with different nuxt hooks instead of page:finish but none seemed to work fine. What would you suggest ?

3 Replies

pyplacca•8mo ago

route.meta is usually not reliable. Why don’t you create a list of route names you can check with to determine when to hide or show the sidebar?

BlazetrailOP•8mo ago

@pyplacca how comes it's usually unreliable ? 🤔

pyplacca•8mo ago

I don’t know. I’ve experienced glitches myself when using it. There’s been times where the data isn’t even available …or even becomes stale when read from a layout

Gaming

Programming

Check whether any page has fully mounted from the root App.vue