diff --git a/.changeset/fix-vue-flexrender-hydration.md b/.changeset/fix-vue-flexrender-hydration.md new file mode 100644 index 0000000000..a9aebda50a --- /dev/null +++ b/.changeset/fix-vue-flexrender-hydration.md @@ -0,0 +1,5 @@ +--- +'@tanstack/vue-table': patch +--- + +Return null instead of empty string in FlexRender to prevent Vue SSR hydration mismatch diff --git a/packages/vue-table/src/index.ts b/packages/vue-table/src/index.ts index 1ea766c261..f698b80a3c 100755 --- a/packages/vue-table/src/index.ts +++ b/packages/vue-table/src/index.ts @@ -37,6 +37,13 @@ export const FlexRender = defineComponent({ return h(props.render, props.props) } + // Return null for empty/nullish values to avoid Vue SSR hydration + // mismatches (e.g. empty string renders a text node on the client + // but nothing on the server) + if (props.render == null || props.render === '') { + return null + } + return props.render } },