I am new to working with Vue and I am attempting to lazy load a Component. However, I encountered an error that seems to be related to a syntax issue. Below is the code snippet:
<template>
<div class="container">
<h1>Async testing</h1>
<button @click="showModal=!showModal">show modal</button>
<Modal v-if=showModal />
</div>
</template>
<script>
import { defineAsyncComponent, ref } from 'vue';
export default {
components: {
Modal: () => defineAsyncComponent(
() => import('@/components/Modal.vue')
)
},
setup(){
const showModal = ref(false);
return {
showModal
}
}
}
</script>
The Modal Comp consists of a simple h2 and a p element inside a container with a red border (The code worked without lazy loading). The following error is being displayed: https://i.sstatic.net/G18s7.png