Super Sale
Limited Time 50% OFF for All-Access Plans
Save 50% Now
Lazy load modal vue
Hi, I'm using metronic vue version 8.1.1
In demo1, the example code to open modal:
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#kt_modal_add_customer"
>
<span class="svg-icon svg-icon-2">
<inline-svg src="media/icons/duotune/arrows/arr075.svg" />
</span>
Add Customer
</button>
...
<AddCustomerModal></AddCustomerModal>Current Status: When accessing the customers list page, it also initializes the AddCustomerModal component
Expected: Lazy load AddCustomerModal (When I click "Add Customer" button, AddCustomerModal component is initialized)
Thanks for your help!
Replies (5)
Hi,
You can achieve a lazy load of the modal component using Vue defineAsyncComponent function.
import { defineAsyncComponent } from "vue"
const AsyncComp = defineAsyncComponent(() =>
import("./components/MyComponent.vue")
)For more info check out vue official doc:
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Reply No,
what is your purpose of your expeced behaviour? Modal is not visible until you open it.
Then you can push some data to it...
-
what is your purpose of your expeced behaviour => I want to lazy load modal, pass data when I open modal
-
Modal is not visible until you open it
I have used onMounted() in AddCustomerModal component.
onMounted(() => {
console.log(111);
})
When accessing the customers list page, it's also print 111 in console
Instead of doing your logic in the onMounted function, you can move it to bootstrap modal show event.
onMounted(() => {
const myModal = document.getElementById("kt_modal_add_customer");
myModal?.addEventListener("shown.bs.modal", function () {
console.log("modal shown");
});
});Regards,
Lauris Stepanovs,
Keenthemes Support Team
