I have a question about migration from asyncData pattern to fecth in Nuxt App. It seems straightforward, except for 1 thing - i can't get NuxtLoading component to act right. I've tried to watch for $fetchState and start loading with this.$nuxt.$loading.start(), but it's no use. The loading indicator flashes for mere second and disappears without any input on my part.
Is there a trick to make it work like it does with asyncData?
Fetch hook and NuxtLoading component
Viewed 77
1 Answers
The whole point of using fetch() is to not block the render in between pages. The loader is here to let the user know when he will be able to expect the next page.
When you're using fetch(), you can use $fetchState.pending to make a conditional and display either a loader or a skeleton like this: https://buefy.org/documentation/skeleton/
The loading bar should still be triggered but it will probably be smoother (and maybe shorter visually), I'd recommend to let it live it's life.
Related