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 · Accepted Answer · 2021-03-18 22:07:31Z

0

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>

answered Mar 18, 2021 at 22:07

Mateusz Krawczyk

3081 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sylnois Over a year ago

<component :is="..."/> is interessting! What if I don't know how many components are there? Better said, let's assume I deliver a productive, compiled Nuxt project and I want to give the user the possibility to add n components but to load only always one into the page? Surely I need to do it similar like importing a javascript library via script .

Mateusz Krawczyk Over a year ago

If you want to compile your project and then load addiitional compnents - it is difficult, because each component needs to be compiled, so to do that we need to know in what way you compile your project, how do you want to compile components and how to deliver it. If you want to simply have faster load time, but you have all your components in moment of compilation, you can use async import.

Collectives™ on Stack Overflow

NuxtJS / Vue.js - Import external component

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related