De acuerdo con este artículo , me gustaría importar el componente para verlo dinámicamente en mi aplicación Vue 3. El código de la vista se ve así:
<template> <div class="page"> <latest-box v-if="showLatestBox" /> </div> </template> <script> // @ is an alias to /src // This works well. //import LatestBox from '@/components/LatestBox.vue' export default { name: 'Page 1', data() { return { showLatestBox: true, } }, components: { LatestBox: () => import('@/components/LatestBox.vue') // This does not work } } </script>El código no arroja ningún error, pero no veo el componente en la página. Si uso el primer estilo de importación, funciona. ¿Me estoy perdiendo algo?
Debe usar defineAsyncComponent en Vue 3 para cargar componentes de forma diferida
import { defineAsyncComponent } from 'vue' ... components: { LatestBox: defineAsyncComponent(() => import('@/components/LatestBox.vue')) }https://v3.vuejs.org/guide/migration/async-components.html#overview