Whitespace preserve does not work

[AndreKR]

Vue version

3.2.37

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-9bf2b5

Steps to reproduce

Check vite.config.ts, you will find that template.compilerOptions.whitespace: 'preserve' is set.

Then look at App.vue and the output.

What is expected?

I is my understanding that with whitespace: 'preserve' the output should be

or at least it should be easily possible to change the template so that it is.

What is actually happening?

The output is

and I have found no obvious way to get the desired output.

I have tried

• adding a second <span> with a space in it
• adding a <slot> </slot> with a space in it (found that on StackOverflow)
• adding   after the span
• adding a space inside the <span> (which wouldn't be the desired result anyway but it doesn't change the output at all)

System Info

StackBlitz

Any additional comments?

I believe the whitespace: 'preserve' functionality was added in #1600.

[edison1105]

It is inconsistent with vue2, see https://codesandbox.io/s/beautiful-tom-6zem3d?file=/src/App.vue

[baiwusanyu-c]

Is this the same issue? #7542
@edison1105

[edison1105]

@baiwusanyu-c
No, this one is about preserving whitespace.

[linhr]

It seems the PR to fix this was approved a white ago but is not merged yet. Are there any blockers to have this fixed?

(I'm using VitePress to generate static documentation sites, and I encountered this issue for a few pages with HTML generated by external tools. The HTML contains whitespace spans <span> </span> but the spans are rendered incorrectly as <span></span> after being processed by Vue.)