render SFC string in a vue component

[kromate]

Hi guys

Is there a way I can render a SFC string i.e I pass a string to a vue component and it renders it
example below

<script setup>
import { ref } from 'vue'
import Comp from './Comp.vue';

const msg = ref('Hello World!')
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg">
  <Comp sfc-string="
<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model='msg'>
</template>
"/>
</template>

https://play.vuejs.org/#eNq9UsFOwzAM/ZWQS0GCVYhbKZMATQIOMDEkLrlMrbtlpElI3DFU9d9xUlY2CRAnbvV7tvuc91p+ae1o3QDPeO4LJy0yD9jYsdCytsYha5mDinWscqZmCbUmA3VtavuJj9JQhE3JudBCF0Z7ZLVfsIswf5jcgFKGPRunyoPkSOg87X9HP6ICobZqjkAVY/nydNy2cbjr8pSqiEptG2Trk9qUoC4EJ17wnopCfFWceHRSL4iknX8/5x/kJkQnROTpzqzg6T7Ejzl60lLJxWjljSZX2rBM8IIulArcg0VJWgXPWGQCNyepb3cRQ9fA8RYvllC8fIOv/CZggk8deHBrEHzgcO4WgD09md3Dhr4Hkk5pFHX/Qj6CN6oJGvu2q0aXJHunL6q9jWaQVU9+skHQfntUEBo6u9gvOBkUzP3p9C+5Z6OzOCd0R6+4DWOI9a5ZeXhHo0Ejy6SnnFBoZjEzvReMte0AdbRs368hVGoeU4akZghYCZXUMHXG+kMSOKzJqMB3C1lf0mEOXhvpoNyeG0RTxnZSxrsPCvw7aQ==

anyhelp would be appreciated

[LinusBorg]

In short: no.

[kromate]

Is there a long answer 😅

[LinusBorg]

The long answer is: you maybe can make it work if you are fine with shipping a ton of additional Javascript, and are willing to dig into the intricacies of how we made it work in the SFC playground. We don't have a ready-to-go solution for that, as SFC compilation is designed to be used in a build step, normally - though it's technically feasable, in a way, as the SFC playground shows.

If you get something to work, it would be a hack, and not performant.

I personally can't really offer you detailed guidance on how to do that as I'm not intimately familiar with the playground architecture.