Nuxt SSR and PrimeVue - hydration error

UI Components for Vue
Post Reply
joerg
Posts: 22
Joined: 07 Nov 2013, 17:44

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

Code: Select all

  plugins: [
    {src:'~/plugins/primevue.js', mode: 'client'}
  ]
and you're wrapping everything into <client-only>

Code: Select all

    <client-only>
      ...
            <HelloWorld msg="Welcome to Your PrimeVue + NuxtJS App"/>
                ...
                <InputText type="text" v-model="text"/>
                ...
    </div>
    </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?
PrimeFaces 8.0.2 | Tomcat 9 | Mojarra 2.2.20
PrimeVue 1.3.2
Win10, Chrome 84

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest