79721306

Date: 2025-07-31 12:56:42
Score: 3.5
Natty:
Report link

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.

Reasons:
  • Blacklisted phrase (1): m facing the same problem
  • Long answer (-0.5):
  • Has code block (-0.5):
  • Me too answer (2.5): I'm facing the same problem
  • Low reputation (1):
Posted by: Rui Mao