Learn how to implement dynamic component import in Vue 3

Question

According to this article, I want to dynamically import components into my Vue 3 application. The code for the view is as follows:

<template>
  <div class="page">
      <latest-box v-if="showLatestBox" />
  </div>
</template>


<script>
// @ is an alias for /src
// This method works
//import LatestBox from '@/components/LatestBox.vue'


export default {
    name: 'Page 1',

    data() {
        return {
            showLatestBox: true,
        }
    },

    components: {
        LatestBox: () => import('@/components/LatestBox.vue') // This method is invalid
    }
}
</script>

The code does not report an error, but I cannot see the component on the page. If I use the first way of importing, it works. Did I miss something?

Answer 1

In Vue 3, you need to use defineAsyncComponent to lazy load components

import { defineAsyncComponent } from 'vue'
...
    components: {
        LatestBox: defineAsyncComponent(() => import('@/components/LatestBox.vue'))
    }

https://v3-migration.vuejs.org/breaking-changes/async-components.html#overview