vue3如何加载远程字符串形式的组件？

Question

比如：

// 伪代码
<template>
  <component :is="remote" />
</template>

<script>
export default {
  setup() {
    let remote
    axios.get("https://...").then((res) => {
      const str = res.data
      /**
        str = `<template>
          <div class="div">demo</div>
        </template>
        <script>
        export default {
          name: "Demo"
        }
        </script>
        <style lang="scss">
        .div{
          color: red;
        }
        </style>`
       */

      // 这里该怎么把 str 解析成可用的组件呢？
    });
    return {
      remote
    }
  },
};
</script>

我谷歌到 vue3-sfc-loader
但它需要一个vue实例——尽管vue3不再暴露vue

那么，还有什么办法实现这种需求吗？

Answer 1

import { compile } from 'vue'