vue-final-modal
vue-final-modal copied to clipboard
Lazy load (dynamic) component with useModal()
Is your feature request related to a problem? Please describe.
import { useModal } from 'vue-final-modal'
import SomeComponent from 'components'
const { open, close } = useModal({
component: SomeComponent,
attrs: {...},
})
// even if someEvent is not called, someComponent is loaded on the page
function someEvent() {
open() // open modal
}
Describe the solution you'd like
import { useModal } from 'vue-final-modal'
// no need to add it to the bundle
// import SomeComponent from 'components'
const { open, close } = useModal({
component: async () => { ... } // load component when it needed
attrs: {...},
})
/*
and when someEvent is triggered that causes the modal to open,
before opening the modal, it first loads its component over the network.
*/
async function someEvent() {
await open() // open modal (wait loading of dynamic component)
}
Describe alternatives you've considered
Additional context
Thanks.