Version

3.2.29

Reproduction link

stackblitz.com

Steps to reproduce

In Vue 3, the is attribute supports only a String or a Component. That means lazy-loaded dynamic components don't work.

What is expected?

In Vue 2, the code below works fine:

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

<script>
export default {
  props: ['name'],
  computed: {
    dynamicComponent() {
      return () => import(`./icons/${this.name}.vue`);
    },
  },
};
</script>

What is actually happening?

In Vue 3 however, it doesn't.

Ahh nvm, I found out that I have to use defineAsyncComponent to make it work:

  computed: {
    dynamicComponent() {
      return defineAsyncComponent(() => import(`./icons/${this.name}.vue`))
    }
  }