Vue: Komponen file tunggal dinamis sejati

Masalah apa yang dipecahkan oleh fitur ini?

Saya punya aplikasi tempat pihak ketiga dapat membuat plugin. Saya ingin mereka dapat membuat plugin tersebut sebagai komponen file tunggal, yang dapat ditarik dan ditampilkan seperti komponen bawaan. Saat ini, satu-satunya cara bagi mereka untuk melakukannya adalah dengan membuat komponen dalam formulir ini:

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

Ini canggung, ditambah tidak ada cara mudah untuk memasukkan gaya.

Lebih detail: https://stackoverflow.com/questions/62035019/load-vue-single-file-component-dynamically-at-runtime

Saya pikir logika untuk melakukan ini ada, tetapi ada di vue-loader, dan benar-benar dimaksudkan untuk digunakan dengan Webpack. Webpack tidak dirancang untuk digunakan saat runtime.

Seperti apa tampilan API yang diusulkan?

<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>