Empty string in column header will cause Hydration console error

[Cyanhall]

Environment

---

• Operating System: Darwin
• Node Version: v20.10.0
• Nuxt Version: 3.15.0
• CLI Version: 3.17.2
• Nitro Version: 2.10.4
• Package Manager: pnpm@9.15.1
• Builder: -
• User Config: default
• Runtime Modules: @nuxt/ui@3.0.0-alpha.9, @nuxt/eslint@0.7.4
• Build Modules: -

---

Is this bug related to Nuxt or Vue?

Nuxt

Version

3.0.0-alpha.10

Reproduction

https://github.com/Cyanhall/nuxt-ui-v3-demo/tree/main/demo2

Description

The empty character in the column header will cause a console error: "Hydration completed but contains mismatches." However, the functionality is normal.

---

Workaround

change from:

{
  accessorKey: 'action',
  header: '',
}

to

{
  accessorKey: 'action',
  header: ' ',
}

Additional context

No response

Logs

client:742 [vite] connecting...
client:861 [vite] connected.
runtime-core.esm-bundler.js:7013 <Suspense> is an experimental feature and its API will likely change.
runtime-core.esm-bundler.js:1638 Hydration completed but contains mismatches.
logMismatchError @ runtime-core.esm-bundler.js:1638
hydrateFragment @ runtime-core.esm-bundler.js:2046
hydrateNode @ runtime-core.esm-bundler.js:1766
hydrateChildren @ runtime-core.esm-bundler.js:1991
hydrateElement @ runtime-core.esm-bundler.js:1880
hydrateNode @ runtime-core.esm-bundler.js:1781
hydrateChildren @ runtime-core.esm-bundler.js:1991
hydrateFragment @ runtime-core.esm-bundler.js:2034
hydrateNode @ runtime-core.esm-bundler.js:1766
hydrateChildren @ runtime-core.esm-bundler.js:1991
hydrateElement @ runtime-core.esm-bundler.js:1880
hydrateNode @ runtime-core.esm-bundler.js:1781
hydrateChildren @ runtime-core.esm-bundler.js:1991
hydrateFragment @ runtime-core.esm-bundler.js:2034
hydrateNode @ runtime-core.esm-bundler.js:1766
hydrateChildren @ runtime-core.esm-bundler.js:1991
hydrateElement @ runtime-core.esm-bundler.js:1880
hydrateNode @ runtime-core.esm-bundler.js:1781
hydrateChildren @ runtime-core.esm-bundler.js:1991
hydrateElement @ runtime-core.esm-bundler.js:1880
hydrateNode @ runtime-core.esm-bundler.js:1781
hydrateChildren @ runtime-core.esm-bundler.js:1991
hydrateElement @ runtime-core.esm-bundler.js:1880
hydrateNode @ runtime-core.esm-bundler.js:1781
hydrateSubTree @ runtime-core.esm-bundler.js:5292
componentUpdateFn @ runtime-core.esm-bundler.js:5310
run @ reactivity.esm-bundler.js:225
setupRenderEffect @ runtime-core.esm-bundler.js:5454
mountComponent @ runtime-core.esm-bundler.js:5229
hydrateNode @ runtime-core.esm-bundler.js:1800
hydrateSubTree @ runtime-core.esm-bundler.js:5292
componentUpdateFn @ runtime-core.esm-bundler.js:5310
run @ reactivity.esm-bundler.js:225
setupRenderEffect @ runtime-core.esm-bundler.js:5454
mountComponent @ runtime-core.esm-bundler.js:5229
hydrateNode @ runtime-core.esm-bundler.js:1800
hydrateSubTree @ runtime-core.esm-bundler.js:5292
componentUpdateFn @ runtime-core.esm-bundler.js:5310
run @ reactivity.esm-bundler.js:225
setupRenderEffect @ runtime-core.esm-bundler.js:5454
mountComponent @ runtime-core.esm-bundler.js:5229
hydrateNode @ runtime-core.esm-bundler.js:1800
hydrateSuspense @ runtime-core.esm-bundler.js:7264
hydrateNode @ runtime-core.esm-bundler.js:1836
hydrateSubTree @ runtime-core.esm-bundler.js:5292
componentUpdateFn @ runtime-core.esm-bundler.js:5310
run @ reactivity.esm-bundler.js:225
setupRenderEffect @ runtime-core.esm-bundler.js:5454
mountComponent @ runtime-core.esm-bundler.js:5229
hydrateNode @ runtime-core.esm-bundler.js:1800
hydrate @ runtime-core.esm-bundler.js:1674
mount @ runtime-core.esm-bundler.js:3939
app.mount @ runtime-dom.esm-bundler.js:1786
initApp @ entry.js:65
await in initApp
(anonymous) @ entry.js:73
devtools.client.js:49 ✨ Nuxt DevTools  Press Shift + Option + D to open DevTools