Nuxt SSR and PrimeVue - hydration error
Posted: 26 Oct 2020, 13:41
Hi
With the help of your primevue-nuxtjs-quickstart project I am running my app on PrimeVue 2.2.0 with Nuxt.js 2.14.7, including using Ultima in the /layouts folder as my layout, and various routes.
I love that setup - there is one caveat though: SSR is not working. In the primevue-nuxtjs-quickstart project you're using
and you're wrapping everything into <client-only>
So it seems you were aware that SSR doesn't work for a PrimeVue project.
If I remove <client-only>, I get the usual hydration error ([Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content) - not for the HelloWorld component, but for all PrimeVue components e.g. InputText. Do you know what the problem for the PrimeVue components are, and if it can be fixed?
With the help of your primevue-nuxtjs-quickstart project I am running my app on PrimeVue 2.2.0 with Nuxt.js 2.14.7, including using Ultima in the /layouts folder as my layout, and various routes.
I love that setup - there is one caveat though: SSR is not working. In the primevue-nuxtjs-quickstart project you're using
Code: Select all
plugins: [
{src:'~/plugins/primevue.js', mode: 'client'}
]
Code: Select all
<client-only>
...
<HelloWorld msg="Welcome to Your PrimeVue + NuxtJS App"/>
...
<InputText type="text" v-model="text"/>
...
</div>
</client-only>
If I remove <client-only>, I get the usual hydration error ([Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content) - not for the HelloWorld component, but for all PrimeVue components e.g. InputText. Do you know what the problem for the PrimeVue components are, and if it can be fixed?