This repository was archived by the owner on Dec 5, 2024. It is now read-only.
This repository was archived by the owner on Dec 5, 2024. It is now read-only.
fix: $fetchState in template leads to hydration errorΒ #535
Open
Description
π The bug
Using the useFetch method and add conditional template renderings depending on the $fetchState.pending
or $fetchState.error
leads to hydration errors.
π οΈ To reproduce
Steps to reproduce the behavior:
my codesandbox: https://codesandbox.io/s/elastic-ardinghelli-vi4vy?file=/pages/index.vue
Add conditional rending to template which uses useFetch:
<div v-if="$fetchState.pending || $fetchState.error">
<div class="loading" v-if="$fetchState.pending">Loading...</div>
<div class="error" v-if="$fetchState.error">
Error: {{ $fetchState.error }}
</div>
</div>
π Expected behaviour
I'm using the option API fetch hook in my project: https://nuxtjs.org/docs/2.x/features/data-fetching#the-fetch-hook like this. Is there any difference using it with composition API ?