[Vuejs]-How i can to store a set of components for some separate vue apps?

by

0👍

✅

i think you are looking for dynamic component .
that way, you can keep the components you need in some json file, import it to the parent component and dynamically create the children, for example, if you have a jsonMap.json file:

{
   landingPage:{
      banners:['child1','child2']
   }
}

then landingPage.vue:

<template>
<div>
  <component v-for="(banner,index) in getBanners" :is="banner" :key="index"</component>
   //this is a dynamic component. the 'is' attribute determine what it will be. 
</div>
</template>

<script>
import jsonMap from 'path/to/jsonMap'
import child1 from 'path/to/shared/components/child1.vue'
import child2 from 'path/to/shared/components/child2.vue'
import child3 from 'path/to/shared/components/child3.vue'

export default {

  name: 'landingPage',
  components:{child1,child2,child3},

  methods:{
    getBanners(){
      return jsonMap[this.name].banners
    }
  }
}
</script>

landing page will render 2 banners- according to the jsonMap.
note that despite you must import and register your components, that can not be done dynamically.

👤Efrat Levitan

0👍

I would make a component called ModuleLoader.vue in that component import all of your components in the load array. Then make a dynamic component that takes a computed property or just a prop to load the component.

App.vue

<ModuleLoader
  v-for="(module, index) in modules"
  :key="`ModuleLoader_${index}`"
  v-bind="module"
/>

ModuleLoader.vue

<component
  :is="moduleData.type"
  v-bind="moduleData.content"
/>

You’ll need a ModuleData prop and you’ll have to import the components you’re loading into this file

Check out this fiddle

👤caseyjoneal

Leave a comment