Vue: مكونات ملف واحد ديناميكية حقيقية

ما المشكلة التي تحلها هذه الميزة؟

لدي تطبيق حيث يمكن للجهات الخارجية إنشاء مكونات إضافية. أرغب في أن يكونوا قادرين على إنشاء هذه المكونات الإضافية كمكونات ملف واحد ، والتي يتم سحبها وعرضها تمامًا مثل المكونات المضمنة. في الوقت الحالي ، الطريقة الوحيدة المتاحة لهم للقيام بذلك هي إنشاء مكون بهذا الشكل:

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

هذا أمر محرج ، بالإضافة إلى أنه لا توجد طريقة سهلة لتضمين الأنماط.

مزيد من التفاصيل: https://stackoverflow.com/questions/62035019/load-vue-single-file-component-dynamically-at-runtime

أعتقد أن المنطق للقيام بذلك موجود ، لكنه في vue-loader ، ومخصص حقًا للاستخدام مع Webpack. Webpack غير مصمم للاستخدام في وقت التشغيل.

كيف تبدو واجهة برمجة التطبيقات المقترحة؟

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