Use v-html without extra wrapping tag with script setup

[dbzx10299]

How can I use vue's v-html directive in a Vue 3 <script setup> environment without an extra wrapping tag?

I want to be able to do something like this:

<script setup>
const html = ref(`<pre></pre>`)
</script>

<template v-html="html"></template>

This code does work, but a 2-3 second delay can be observed when this approach is taken which is not ideal.

<script setup>
const html = ref(`<pre></pre>`)
</script>

<template>
  <template v-html="html"></template>
</template>

Is there a way we could create some kind of fragment component?

[masyoudi]

have you try using component tag?

<template>
  <ClientOnly>
    <component :is="tagName" v-html="content"> </component>
  </ClientOnly>
</template>

<script setup lang="ts">
const html = ref("<pre><code>let a = 'foo';</code></pre>");

const tagName = computed(() => {
  const arr = [...html.value.matchAll(/<([a-zA-Z]*)\b[^>]*>(.*?)<\/\1>/g)];

  return arr.length >= 1 ? arr[0][1] : 'div';
});

const content = computed(() => {
  return html.value.replace(/<([a-z]+)(?![^>]*\/>)[^>]*>/, '').replace(/<\/([a-z]+)>$/, '');
});
</script>