import multiple components dynamically based on conditions in vue.js and nuxt

Question

How I can use dynamic imports for all 3 components? I do have different props for different components so I cannot use the switch option in the computed method to return the components

I do find solutions to use a single component but have never seen an example where I can put more than one component which will import based on condition. In UI I can see my component will not be loaded because of the v-if condition but when I go to the Network tab and see the JS option, my component is actually imported.

Template:

<template>
   <div>
      <b-button v-if="condition1" v-b-toggle.collapse-1 variant="primary">Component1</b-button>
      <b-collapse id="collapse-1" class="mt-2">
         <b-card>
            <p class="card-text">Collapse contents Here</p>
            <component :is="condition1" :data1 = "data.cond1" />
         </b-card>
      </b-collapse>
      <b-button v-if="condition2" v-b-toggle.collapse-2 variant="primary">Component2</b-button>
      <b-collapse id="collapse-2" class="mt-2">
         <b-card>
            <p class="card-text">Collapse contents Here</p>
            <component :is="condition2" :data2 = "data.cond2" />
         </b-card>
      </b-collapse>
      <b-button v-if="condition3" v-b-toggle.collapse-3 variant="primary">Component3</b-button>
      <b-collapse id="collapse-3" class="mt-2">
         <b-card>
            <p class="card-text">Collapse contents Here</p>
            <component :is="condition3" :data3 = "data.cond3" />
         </b-card>
      </b-collapse>
   </div>
</template>

Code:
        <script>
        export default {
          props: {
            component: String,
          },
    
          data() {
          },
    
          computed: {
            condition1() {
              const condition1 = true; ////this.$store.state.data.cond1.condition1
              if(condition1){
              return () => import(`../components/component1`);
              }
            },
              condition2() {
              const condition2 = false; //this.$store.state.data.cond2.condition2
              if(condition2){
              return () => import(`../components/component2`);
              }
            },
              condition3() {
               const condition3 = true; ////this.$store.state.data.cond3.condition3
              if(condition3){
              return () => import(`../components/component3`);
              }
            },
          },
    
          created() {
           
            },
          },
        }
        </script>


I tried this and I get an error :

> Unknown custom element:<component> - did you register the component
> correctly? For recursive components, make sure to provide the "name"
> option.

Note: when I try with one condition, it is working fine but going with multiple conditions and components, it is throwing the above error.

Thanks a lot for your answer @power-cut.

As I do have an expandable structure where I need to show the component separately I can't go with just one component approach.

I get response from service, based on that I want to import them — Bravo, May 09 '22 at 19:02
I’m asking *why*; what does it gain you? They all need to exist if it’s a runtime decision which component will be used. Why can’t you import them normally? — Dave Newton, May 09 '22 at 19:07
Sorry for the misunderstanding. I am trying to achieve dynamic import here to avoid loading some components if the conditions are false. — Bravo, May 09 '22 at 19:12
It’s a single page app—I’m still not clear on what savings would be afforded by this. — Dave Newton, May 09 '22 at 19:21
Checked this one: https://stackoverflow.com/a/67825061/8816585 — kissu, May 09 '22 at 19:24
Not sure if it's the right approach tho. Keeping one is probably the way to go here, with a method. — kissu, May 09 '22 at 19:27

power-cut · Answer 1 · 2022-05-09T20:23:08.607

You might want to rethink your approach toward developing the Vue component in this case. Below is how you can implement dynamic component based on store condition.

<template>
  <component :is="myDynamicComponent" />
</template>
<script>
import Component1 from './src/component1.vue'
import Component2 from './src/component2.vue'
import Component3 from './src/component3.vue'
export default {
  data() {
   return {}
  },

  computed: {
    myDynamicComponent() {
        switch (this.$store.state.foo) {
            case "condition1":
                return Component1;
            case "condition2":
                return Component2;
            case "condition3":
                return Component3;
            default:
                return Component1;
        }
     }
  }   
</script>

Thanks a lot for the answer. Actually, I cant use this approach as I have to send different data to different components. — Bravo, May 09 '22 at 21:03

import multiple components dynamically based on conditions in vue.js and nuxt

1 Answers1

Linked