Vue: 진정한 동적 단일 파일 구성 요소

이 기능은 어떤 문제를 해결합니까?

타사에서 플러그인을 만들 수 있는 앱이 있습니다. 나는 그들이 플러그인을 단일 파일 구성 요소로 생성할 수 있기를 바랍니다. 이 구성 요소는 내장 구성 요소처럼 가져와서 표시됩니다. 지금 당장 그들이 할 수 있는 유일한 방법은 다음과 같은 형식으로 구성 요소를 만드는 것입니다.

{
template: "<div>stuff</div>",
props: ...
etc.
}

이것은 어색하고 스타일을 포함하는 쉬운 방법이 없습니다.

자세한 내용: https://stackoverflow.com/questions/62035019/load-vue-single-file-component-dynamically-at-runtime

나는 이것을 하는 논리가 존재한다고 생각하지만 그것은 vue-loader에 있고 실제로 Webpack과 함께 사용하기 위한 것입니다. Webpack은 런타임에 사용하도록 설계되지 않았습니다.

제안된 API는 어떻게 생겼습니까?

<template>
  <div>
    The component goes here:
    <component :is="pluginComponent"></component>
  </div>
</template>
<script>
import { compileSFC } from "vue-template-compiler";
export default {
  data() {
    return {
      pluginComponent: null
    };
  },
  mounted() {
    // fetch code from some external source here
    let code = "<template><div>hello</div></template><style>some styles</style><script>some code</script>";
    let comp = compileSFC(code);
    this.pluginComponent = comp;
  }
};
</script>