I'm facing the same problem and my workaround is to pass a pre
to the slot. So you have to use the component like this:
<myComponent>
<pre>
multiple
lines
</pre>
</myComponent>
One bonus effect is that formatters like prettier would keep the content of pre
untouched. I also made the slot reactive using the following code:
import { useSlots, computed } from "vue";
export function useRawText() {
const slots = useSlots();
const raw = computed(() => {
let text = "";
let block = false;
if (slots.default) {
const slot = slots.default()[0];
text = String(slot.children);
block = slot.type == "pre";
}
console.debug({ text, block });
return { text, block };
});
return raw;
}
Here block
indicates whether you pass in a pre
or something else (e.g. text).
This is ugly, but at least works.