As mentioned in this informative article, I am looking to dynamically import a component to view in my Vue 3 application. Here is the snippet of code from the view:
<template>
<div class="page">
<latest-box v-if="showLatestBox" />
</div>
</template>
<script>
// @ is an alias to /src
// This method works fine.
//import LatestBox from '@/components/LatestBox.vue'
export default {
name: 'Page 1',
data() {
return {
showLatestBox: true,
}
},
components: {
LatestBox: () => import('@/components/LatestBox.vue') // This method is not displaying the component
}
}
</script>
The code does not produce any errors, but the component is not visible on the page. When I use the first import method, it works fine. Is there something I am overlooking?