NuxtJS / Vue.js - 導入外部組件

Question

我正在嘗試向我現有的用 NuxtJS 編寫的 web ui 添加一個小部件/插件/擴展系統。 我有一個pages/view.vue單文件組件，我想在其中實現擴展系統。 到目前為止，我的想法是將組件動態加載到通過查詢參數指示的單文件組件中，例如/view?extension=example-a 。

理念一

到目前為止，我能找到的最好的是這樣的： 在 nuxt.js 頁面中包含外部 javascript 文件。 我只是不確定如何編譯它們的組件，因為我試圖從我的示例組件構建一個 webpack 資源，但最終無法像上面的示例那樣導入它。 這是錯誤消息[Vue warn]: Unknown custom element: <example-a> - did you register the component correctly? For recursive components, make sure to provide the "name" option. [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'a你想要的組件。

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