Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
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)
Can anyone help me please
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...
1. what is your purpose of your expeced behaviour => I want to lazy load modal, pass data when I open modal
2. 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
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: https://vuejs.org/guide/components/async.html
Regards,
Lauris Stepanovs,
Keenthemes Support Team
