[Vue warn]: Hydration node mismatch about vue3-table-lite HOT 5 CLOSED

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>

from vue3-table-lite.

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

from vue3-table-lite.

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?

from vue3-table-lite.

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

from vue3-table-lite.

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 axios to 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.

from vue3-table-lite.