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
– Bravo, Commented May 9, 2022 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
– Dave Newton, Commented May 9, 2022 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
– Bravo, Commented May 9, 2022 at 19:12
It’s a single page app—I’m still not clear on what savings would be afforded by this. — Dave Newton
– Dave Newton, Commented May 9, 2022 at 19:21

power-cut · Accepted Answer · 2022-05-09 20:23:08Z

0

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>

edited May 9, 2022 at 20:23

answered May 9, 2022 at 19:40

power-cut

1,5581 gold badge21 silver badges38 bronze badges

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

2 Comments

Bravo Over a year ago

Thanks a lot for the answer. Actually, I cant use this approach as I have to send different data to different components.

Irakli Kandelaki Over a year ago

You still import components this way.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related