N
Nuxt3mo ago
Blazetrail

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
pyplacca3mo 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?
Blazetrail
Blazetrail3mo ago
@pyplacca how comes it's usually unreliable ? 🤔
pyplacca
pyplacca3mo 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