[Vuejs]-NuxtJS / Vue.js – Import external component

by

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>

Leave a comment