How to make vue3 import async dynamic component work?

Question

I am a beginner using vue3. We can use dynamic component like this:

<script setup>
import CommonLayout from "@/components/Layout/CommonLayout.vue";
</script>
<template>
  <component :is="CommonLayout>

   </component >
</template>

and I try to use dynamic component like this,but it is wrong:

export default {
  CommonLayout: () => import("./CommonLayout.vue"),
  EmptyLayout: () => import("./EmptyLayout.vue"),
  HeaderLayout: () => import("./HeaderLayout.vue"),
};

<script setup>
   import layouts from "@/components/Layout/index.js";
   const { default: Layout } = await layouts["CommonLayout"]();
</script>
<template>
  <Layout>
    something
  </Layout>
</template>

not error catch but the page show nothing. and the Layout is the same with CommonLayout:

Answer 1

You need to use defineAsyncComponent

<script setup>
import { defineAsyncComponent } from 'vue'

const CommonLayout = defineAsyncComponent(() => import("./CommonLayout.vue"))
const EmptyLayout = defineAsyncComponent(() => import("./EmptyLayout.vue"))
const HeaderLayout = defineAsyncComponent(() => import("./HeaderLayout.vue"))
</script>

<template>
  <component :is="CommonLayout></component>
  <component :is="EmptyLayout></component>
  <component :is="HeaderLayout></component>
</template>