vue-final / vue-final-modal

🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.
https://vue-final-modal.org
MIT License
862 stars 95 forks source link

Lazy load (dynamic) component with useModal() #423

Open azabroflovski opened 5 months ago

azabroflovski commented 5 months ago

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.