Vue: सही गतिशील एकल-फ़ाइल घटक

यह सुविधा किस समस्या का समाधान करती है?

मेरे पास एक ऐप है जहां तीसरे पक्ष प्लगइन्स बना सकते हैं। मैं चाहता हूं कि वे उन प्लगइन्स को एकल फ़ाइल घटकों के रूप में बनाने में सक्षम हों, जो अंतर्निर्मित घटकों की तरह ही खींचे और प्रदर्शित होते हैं। अभी, उनके लिए ऐसा करने का एकमात्र तरीका इस रूप में एक घटक बनाना है:

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

यह अजीब है, साथ ही शैलियों को शामिल करने का कोई आसान तरीका नहीं है।

अधिक जानकारी: https://stackoverflow.com/questions/62035019/load-vue-single-file-component-dynamically-at-runtime

मुझे लगता है कि ऐसा करने का तर्क मौजूद है, लेकिन यह वू-लोडर में है, और वास्तव में वेबपैक के साथ उपयोग के लिए अभिप्रेत है। वेबपैक को रनटाइम पर उपयोग के लिए डिज़ाइन नहीं किया गया है।

प्रस्तावित एपीआई कैसा दिखता है?

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