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!

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(