vue-final-modal icon indicating copy to clipboard operation
vue-final-modal copied to clipboard

Lazy load (dynamic) component with useModal()

Open azabroflovski opened this issue 1 year ago • 1 comments

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.

azabroflovski avatar Jan 17 '24 09:01 azabroflovski