Nuxt SSR and PrimeVue - hydration error

joerg · 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?

totemcaf · 14 May 2021, 19:27

I can confirm the same behaviour.

I used `data` and asyncData` methods to try, but none work.

I used this page:

Code: Select all

<template>
  <TabView>
    <TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
      <p>{{tab.content}}</p>
    </TabPanel>
  </TabView>
</template>

<script>
export default {
  name: 'treeView',
  data () {
    return {
      tabs: [
        { title: 'Title 10', content: 'Content 1' },
        { title: 'Title 20', content: 'Content 2' },
        { title: 'Title 30', content: 'Content 3' }
      ]
    }
  },
  asyncData () {
    return {
      tabs: [
        { title: 'Title 1', content: 'Content 1 async' },
        { title: 'Title 2', content: 'Content 2 async' },
        { title: 'Title 3', content: 'Content 3 async' }
      ]
    }
  }
}
</script>

<style scoped>

</style>

It shows the page as expected in the client, but if you check the generate HTML it does not includes the TabPanels, so the SSR is incomplet.

The generate HTML (excluding CSS, and formatted a little) shows the TabPanels are missing from the HTML:

Code: Select all

<!doctype html>
<html data-n-head-ssr lang="en" data-n-head="%7B%22lang%22:%7B%22ssr%22:%22en%22%7D%7D">
  <head >
    <title>ch-www-vue</title>
<meta data-n-head="ssr" charset="utf-8">
<meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1">
<meta data-n-head="ssr" data-hid="description" name="description" content="">
<link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="preload" href="/_nuxt/runtime.js" as="script"><link rel="preload" href="/_nuxt/commons/app.js" as="script"><link rel="preload" href="/_nuxt/vendors/app.js" as="script"><link rel="preload" href="/_nuxt/app.js" as="script"><link rel="preload" href="/_nuxt/pages/tabview2.js" as="script"><link rel="preload" href="/_nuxt/pages/tabview2.62ab2bafa2bc0d813431.hot-update.js" as="script"
 <body >
    <div data-server-rendered="true" id="__nuxt"><!----><!----><div id="__layout"><div>
    <div class="p-tabview p-component" data-v-d806bd9e><!----><!----><!---->
    
    <ul role="tablist" class="p-tabview-nav"><li class="p-tabview-ink-bar"></li></ul>
    
    <div class="p-tabview-panels"></div>
    
    </div></div></div></div>
    <script>window.__NUXT__=(function(a){return {layout:"default",data:[{tabs:[{title:"Title 1",content:"Content 1 async"},{title:"Title 2",content:"Content 2 async"},{title:"Title 3",content:"Content 3 async"}]}],fetch:{},error:a,serverRendered:true,routePath:"\u002Ftabview2",config:{_app:{basePath:"\u002F",assetsPath:"\u002F_nuxt\u002F",cdnURL:a}},logs:[]}}(null));</script><script src="/_nuxt/runtime.js" defer></script><script src="/_nuxt/pages/tabview2.js" defer></script><script src="/_nuxt/pages/tabview2.62ab2bafa2bc0d813431.hot-update.js" defer></script><script src="/_nuxt/commons/app.js" defer></script><script src="/_nuxt/vendors/app.js" defer></script><script src="/_nuxt/app.js" defer></script>
  </body>
</html>

Nuxt SSR and PrimeVue - hydration error

Who is online