Is this v-for whitespace stripping expected with whitespace: 'preserve' compiler option?

[alexchexes]

Hello,
I am using Vue 3.5.13 / Vite 6.1.0.

I configured Vite to preserve whitespaces as follows:

// vite.config.js
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          whitespace: 'preserve', // <-- Option is set
        },
      },
    }),
  ],
  // ...
})

However, the following code produces results like the screenshots below—there are no spaces between the <span> elements.

<script setup>
import { ref } from 'vue'
const words = ref(['word1', 'word2', 'word3']);
</script>

<template>
  <div>
    Words:
    <span v-for="(word, idx) in words" :key="idx"> {{ word }} </span>
  </div>
</template>

I searched for similar questions about preserving whitespaces in Vue templates. While I found a few, most seem outdated, as there were earlier bugs that appear to have been fixed.

So my question is:
Is the current behavior, where the whitespace: 'preserve' compiler option still strips whitespaces between v-for elements, expected?

[alexchexes]

Interestingly, if I do it manually like this:

<template>
  <div>
    Words:
    <span> word1 </span><span> word2 </span><span> word3 </span>
  </div>
</template>

I get the output I expect:

However, if I do this:

<template>
  <div>
    Words:
    <span> {{ words[0] }} </span><span> {{ words[1] }} </span><span> {{ words[2] }} </span>
  </div>
</template>

I end up with the same whitespace-stripped result as with v-for:

[KazariEX]

See:

core/packages/compiler-core/src/parser.ts

Lines 848 to 852 in 263f63f

	// Remove if:
	// - the whitespace is the first or last node, or:
	// - (condense mode) the whitespace is between two comments, or:
	// - (condense mode) the whitespace is between comment and element, or:
	// - (condense mode) the whitespace is between two elements AND contains newline

[alexchexes]

Could you clarify what do you mean, or how the parser treats whitespace around interpolations in "preserve" mode?

From the snippet you show, it seems that whitespace should only be removed in specific cases (e.g., first/last node), but in practice, spaces around {{ ... }} are also getting stripped.

[KazariEX]

<div> {{ foo }} </div> will be parsed with TEXT INTERPOLATION TEXT as its child nodes, the whitespaces are removed as the first and last nodes within the node, following the above rules.

[alexchexes]

Thanks for clarifying. If the parser always interprets <span> {{ foo }} </span> as “TEXT + INTERPOLATION + TEXT,” removing whitespace as the first or last node, how can we preserve a space in whitespace: 'preserve' mode?

Is there a recommended approach to ensure at least one space between elements in constructs like
<span> {{ foo }} </span> <span> {{ bar }} </span>
or
<span v-for="..."> {{ foo }} </span>
?

[KazariEX]

From the code, this rule is not affected by the preserve option, so I am not sure if there are other ways to achieve this.

Maybe you can do this: <span>{{ ' ' + foo + ' ' }}</span>.

[alexchexes]

Maybe you can do this: {{ ' ' + foo + ' ' }}.

Cumbersome. But thanks