[Vue warn]: Hydration node mismatch

[Rednas83]

When using VueTableLite with nuxt I get the following warning My call is

      <!-- Table -->
      <VueTableLite
        v-if="cindex.type == 'table'"
        :columns="cindex.header"
        :rows="cindex.items"
        :total="cindex.items?.length"
        :page-size="cindex.items?.length < 10 ? cindex.items?.length : 10"
        :sortable="inputs.sortable"
        :is-static-mode="true"
        :has-checkbox="inputs.selectable"
      ></VueTableLite>

With this data

The table loads fine, but I am not sure how to get rid of the warning? Any ideas?

[linmasahiro]

The table loads fine, but I am not sure how to get rid of the warning? Any ideas?

Hi, @Rednas83 I think this problem cause you are used nuxt.js and enabled SSR mode, so it's told you server side's html and client side's html has something different? You can try to wrap <VueTableLite> with <ClientOnly> , maybe resolve the problem.

<ClientOnly>
    <VueTableLite
        v-if="cindex.type == 'table'"
        :columns="cindex.header"
        :rows="cindex.items"
        :total="cindex.items?.length"
        :page-size="cindex.items?.length < 10 ? cindex.items?.length : 10"
        :sortable="inputs.sortable"
        :is-static-mode="true"
        :has-checkbox="inputs.selectable"
      ></VueTableLite>
</ClientOnly>

[Rednas83]

Just tried it with ClientOnly but I still have the warning unfortunately Tried:

• Restarting the server
• Making it simpler also didn't work <VueTableLite :columns="cindex.header" :rows="cindex.items"></VueTableLite>
• Using the website example worked without warning. Biggest different that I can see is that my data is asynchronously https://github.com/linmasahiro/vue3-table-lite#samplecode

[Rednas83]

Moving ClientOnly to the root instead of just VueTableLite caused an error instead of the warning After turning off static mode it now works as expected

Any ideas why static mode is not working with nuxt?

[linmasahiro]

Hi, @Rednas83 It's nuxt3's project? Can you implement the problem on Codesandbox?

[Rednas83]

Just tried reproducing it with Sandbox but no problems there so I guess I will have to look further in my application. https://codesandbox.io/p/sandbox/zdhq6m

The online sandbox gives a permission error but you should be able to open the sandbox in VS Code

I used the provided example but migrated axiosto fetch and used a different url because the url in the example was using html instead of json.

I will turn off static mode for now in my application.