NuxtJS / Vue.js - Import external component

Question

I am trying to add a widget/plugin/extension system to my existing web ui written with NuxtJS. I have a pages/view.vue single-file component where I would like to implement the extension system. My idea so far is to load dynamically component into the single-file component indicated via a query parameter e.g. /view?extension=example-a.

Idea 1

So far the best i could find is something like this: Include external javascript file in a nuxt.js page. I am just not sure, how the compiled their component, because I tried to build a webpack resource from my example-a component, but couldn't import it in the end like the example above. This was the error message [Vue warn]: Unknown custom element: <example-a> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Idea 2

Thought I could do it with the http-vue-loader, but I do not know where to start

Idea 3

Maybe I am thinking to far and there is even a easier solution.

Mateusz Krawczyk Mateusz Krawczyk · Accepted Answer · 2021-03-18T22:07:31

You need to directly load all your component into your code. Then you can find your parameter from url in this.$route.query.extension (if you use vue-router) and then load component you want by <component :is="..."/> putting into 'is' a component you want.

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

NuxtJS / Vue.js - Import external component

1 Answers