Why dynamic component is not working in vue3?

Question

Here is a working Vue2 example:

<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>

Redone under Vue3 option does not work. No errors occur, but the component does not appear.

<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>

Has anyone studied the vue2 beta version? Help me please. Sorry for the clumsy language, I use Google translator.

Answer 1

Leave everything in the template as in Vue2

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

Change only in "setup" using defineAsyncComponent

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

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

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

Answer 2

Try this

import DynamicComponent from './DynamicComponent.vue'


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

        ...

        return {
            state,
            ...
        }
    }
}

Answer 3

Using 'watch' everything works.

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

<script lang="ts">
import {defineComponent, ref, watch, SetupContext} from "vue";

export default defineComponent({
  props: {
    path: {type: String, required: true}
  },
  setup(props: { path: string }, context: SetupContext) {
    const componentPath = ref("");

    watch(
        () => props.path,
        newPath => {
          if (newPath !== "")
            import("@/" + newPath + ".vue").then(val => {
              componentPath.value = val.default;
              context.emit("loaded", true);
            });
          else {
            componentPath.value = "";
            context.emit("loaded", false);
          }
        }
    );

    return {componentPath};
  }
});
</script>

Answer 4

The issue with this seems to be to do with the way we register components when we use the setup script - see the official docs for more info. I've found that you need to register the component globally in order to reference it by string in the template.

For example, for the below Vue component:

<template>
  <component :is="item.type" :item="item"></component>
</template>

<script setup lang="ts">
  // Where item.type contains the string 'MyComponent'
  const props = defineProps<{
    item: object
  }>()
</script>

We need to register the component in the main.ts, as such:

import { createApp } from 'vue'
import App from './App.vue'

import MyComponent from './MyComponent.vue'

var app = createApp(App);
app.component('MyComponent', MyComponent)
app.mount('#app')