vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
46.86k stars 8.22k forks source link

Support preserving whitespace in tags other than `pre` #8053

Open segevfiner opened 1 year ago

segevfiner commented 1 year ago

What problem does this feature solve?

The SFC compiler only preserves whitespace in pre tag, if you want to preserve whitespace when passing content to custom components or tags that require whitespace preservation you have to contort yourself to pass content wrapped in a pre tag. It would be nice to have some directives that preserve whitespace in any arbitrary tag so this isn't necessary.

What does the proposed API look like?

<template>
  <CodeBlock language="javascript" v-preserve-ws>
const name = "World";
console.log(`Hello, ${name}!`);
  </CodeBlock>
</template>
Lyokolux commented 1 year ago

html does not allow stacking regular space; it is a feature of HTML, not vue.

from a comment of https://stackoverflow.com/questions/65381611/add-whitespace-in-vue.


You can already build such a directive.

In your example, the content inside CodeBlock is passed to the default slot. You can intercept it in the directive, then convert the content to a string and display it.