运行时动态加载 Vue 单文件组件

Question

We've got a Vue app and would like to allow third parties to create plugins. We'd like the plugins to be built in the form of a Vue single-file component.

At runtime, the end user would select a plugin to add to the app. The app would fetch the plain-text.vue file, compile it on the fly, and display it in the app.

Vue supports dynamic and async components , but these to be compiled into the app ahead of time. We'd like to do the same thing, except load the code on the fly.

How can I make this work?

Here's what I've got so far:

<template>
  <div>
    The component goes here:
    <component :is="pluginComponent"></component>
  </div>
</template>
<script>
import { parseComponent } 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>";
    let comp = parseComponent(code);
    this.pluginComponent = comp;
  }
};
</script>

(I modified the build so the vue-template-compiler is present.)

The code above generates this error:

[Vue warn]: invalid template option:[object Object]
found in
---> <Anonymous>
       <Pages/plugin/PluginId.vue> at pages/plugin/_plugin_id.vue
         <Nuxt>
           <Layouts/default.vue> at layouts/default.vue
             <Root> instrument.js:110
    instrumentConsole instrument.js:110
    VueJS 15
TypeError: "vnode is null"
    VueJS 14
instrument.js:110

I'm guessing that whatever parseComponent() produces isn't what <component> is looking for.

Answer 1

I'm guessing that whatever parseComponent() produces isn't what <component> is looking for

I'd say yes, as it doesn't seem to compile to any render functions.

As stated in the docs , vue-template-compiler is for runtime-compilation. And in most cases you should be using it with vue-loader .

How can I make this work?

You might want to use Vue.compile as it allows you to compile template string into a render function; which you can then bind to an object for an async or dynamic component.

Do note, however, that this is only available in the full build , which is roughly 30% heavier-weight than the runtime-only build counterparts. Read more on Runtime + Compiler vs. Runtime-only .

With that in mind, since you didn't mention in the question, which bundler you are using, I'm going to assume Webpack with Vue-CLI, and here's how you would configure the vue alias (as a reference point when importing).

Verifying your set Vue "alias"

In your console (from the root of the project), run:

vue inspect resolve.alias.vue$

If that results in something along "vue/dist/vue.runtime.esm.js" (it should be, by default), then it's clear that we need to change this part.

Configuring it

Now, since the internal webpack config is maintained using webpack-chain , we would configure/reset the alias like so:

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
  }
}

Check out the explanation of different builds .

Using it

And at this point, all you'd need to do is pass the "dynamic" template to the compile function, excluding the <template> tag though.

import Vue from 'vue';

export default {
  mounted() {
    // fetch code from some external source here
    let code = '<div>hello</div>';
    let comp = Vue.compile(code);
    
    this.pluginComponent = comp;
  }
}

<template>
  <div>
    The component goes here:
    <component :is="pluginComponent"></component>
  </div>
</template>