Dynamic component in Vue3 Composition API

Question

A simple working example of a Vue2 dynamic component


<template>
    <div>
        <h1>O_o</h1>
        <component :is="name"/>
        <button @click="onClick">Click me !</button>
    </div>
</template>

<script>
    export default {
        data: () => ({
            isShow: false
        }),
        computed: {
            name() {
                return this.isShow ? () => import('./DynamicComponent') : '';
            }
        },
        methods: {
            onClick() {
                this.isShow = true;
            }
        },
    }
</script>

Everything works, everything is great. I started trying how it would work with the Composition API.

<template>
    <div>
        <h1>O_o</h1>
        <component :is="state.name"/>
        <button @click="onClick">Click me !</button>
    </div>
</template>

<script>
    import {ref, reactive, computed} from 'vue'

    export default {
        setup() {
            const state = reactive({
                name: computed(() => isShow ? import('./DynamicComponent.vue') : '')
            });

            const isShow = ref(false);

            const onClick = () => {
                isShow.value = true;
            }

            return {
                state,
                onClick
            }
        }
    }
</script>

We launch, the component does not appear on the screen, although no errors are displayed.

Oleksii · Accepted Answer · 2021-02-12 14:06:12Z

25

You can learn more about 'defineAsyncComponent' here https://labs.thisdot.co/blog/async-components-in-vue-3

or on the official website https://v3.vuejs.org/api/global-api.html#defineasynccomponent

import { defineAsyncComponent, defineComponent, ref, computed } from "vue"

export default defineComponent({
setup(){
const isShow = ref(false);
const name = computed (() => isShow.value ? defineAsyncComponent(() => import("./DynamicComponent.vue")): '')

const onClick = () => {
    isShow.value = true;
  }
 }
})

edited Feb 12, 2021 at 14:06

answered Jan 29, 2021 at 8:24

Oleksii

2,7613 gold badges10 silver badges22 bronze badges

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

Comments

Aleks · Accepted Answer · 2021-05-06 20:55:39Z

Here is how you can load dynamic components in Vue 3. Example of dynamic imports from the icons collection inside /icons folder prefixed with "icon-".

BaseIcon.vue

<script>
import { defineComponent, shallowRef } from 'vue'

export default defineComponent({
  props: {
    name: {
      type: String,
      required: true
    }
  },
  setup(props) {
    // use shallowRef to remove unnecessary optimizations
    const currentIcon = shallowRef('')

    import(`../icons/icon-${props.name}.vue`).then(val => {
      // val is a Module has default
      currentIcon.value = val.default
    })

    return {
      currentIcon
    }
  }
})
</script>

<template>
    <svg v-if="currentIcon" width="100%" viewBox="0 0 24 24" :aria-labelledby="name">
      <component :is="currentIcon" />
    </svg>
</template>

You don't need to use computed or watch. But before it loads and resolved there is nothing to render, this is why v-if used.

UPD So if you need to change components (icons in my case) by changing props use watchEffect as a wrapper around the import function.

watchEffect(() => {
  import(`../icons/icon-${props.name}.vue`).then(val => {
    currentIcon.value = val.default
  })
})

Don't forget to import it from vue =)

Dzantiev · Accepted Answer · 2022-11-23 19:55:09Z

4

Instead of string you should provide Component

<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

<template>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
</template>

answered Nov 23, 2022 at 19:55

Dzantiev

511 bronze badge

1 Comment

kirbby Over a year ago

This is an important detail. Thanks!

Максим Пятак · Accepted Answer · 2023-04-04 19:13:21Z

4

To solve the same problem, I used <script> in addition to <script setup>, and imported the component in it

<template>
    <component :is="step">
               
   </component>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';
const step = ref('what-budget');
</script>

<script>
import WhatBudget from "../components/Quiz/WhatBudget.vue";
export default {
   components: {
      WhatBudget
   },
}
</script>

edited Apr 4, 2023 at 19:13

answered Apr 4, 2023 at 19:09

Максим Пятак

615 bronze badges

1 Comment

Shea Lavington Over a year ago

There's nothing dynamic about this. — Your issue should actually be fixed by 1) removing your second script tag 2) adding import WhatBudget from "../components/Quiz/WhatBudget.vue"; before your const step 3) change ref('what-budget') to ref(WhatBudget)...

Boussadjra Brahim · Accepted Answer · 2022-01-18 17:28:04Z

-1

The component should be added to components option then just return it name using the computed property based on the ref property isShow :

components:{
   MyComponent:defineAsyncComponent(() => import("./DynamicComponent.vue"))
},
setup(){
const isShow = ref(false);
const name = computed (() => isShow.value ? 'MyComponent': '')

const onClick = () => {
    isShow.value = true;
}
}

edited Jan 18, 2022 at 17:28

answered Jan 29, 2021 at 11:39

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Collectives™ on Stack Overflow

Dynamic component in Vue3 Composition API

5 Answers 5

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related