True dynamic single-file components

[ccleve]

What problem does this feature solve?

I've got an app where third parties can create plugins. I'd like them to be able to create those plugins as single file components, which get pulled in and displayed just like built-in components. Right now, the only way for them to do it is to create a component in this form:

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

This is awkward, plus there is no easy way to include styles.

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

I think that the logic to do this exists, but it's in vue-loader, and really intended for use with Webpack. Webpack is not designed for use at runtime.

What does the proposed API look like?

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

[posva]

There are already tools to achieve the compilation process that exists inside vue-loader: https://github.com/vuejs?q=compiler&type=&language=

[ccleve]

Ok, but there isn't sufficient documentation to actually use them. There are no examples.

I went through some rollup code looking for some, but even the basic import generates a ton of compile errors, mostly pertaining to consolidate.js:

import { createDefaultCompiler } from "@vue/component-compiler";

Please don't mark this closed without adding a simple usage example. The example could be added to the README, and also used to answer this person's question: vuejs/vue-component-compiler#93

[ccleve]

@posva Wanted to make sure you saw my comment above.