NuxtJS / Vue.js - 导入外部组件

Question

我正在尝试将一个小部件/插件/扩展系统添加到我现有的使用 NuxtJS 编写的 web ui 中。我有一个pages/view.vue 单文件组件，我想在其中实现扩展系统。到目前为止，我的想法是将组件动态加载到通过查询参数指示的单文件组件中，例如/view?extension=example-a.

想法 1

到目前为止，我能找到的最好的东西是这样的：Include external javascript file in a nuxt.js page。我只是不确定如何编译他们的组件，因为我尝试从我的示例组件构建 webpack 资源，但最终无法像上面的示例那样导入它。这是错误消息[Vue warn]: Unknown custom element: <example-a> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

想法 2

我想我可以用http-vue-loader 来做，但我不知道从哪里开始

想法 3

也许我想得太远了，甚至还有更简单的解决方案。

Answer 1

您需要将所有组件直接加载到代码中。然后你可以从this.$route.query.extension中的url找到你的参数（如果你使用vue-router），然后通过<component :is="..."/>加载你想要的组件，放入'is'你想要的组件。

<template>
  <div>
    <component :is="loadedComponent" v-if="loadedComponent !== null"/>
  </div>
</template>
<script>
  import exampleA from "./exampleA.vue";
  import exampleB from "./exampleB.vue";

  export default {
    data(){
      return {components:{'example-a':exampleA , 'example-b':exampleB }}
    },
    computed:{
      loadedComponent(){
        return this.components[this.$route.query.extension] ?? null;
      }
    }
  }
</script>