Lazy load (dynamic) component with useModal()

[azabroflovski]

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.

[kkuegler]

You can use Vue's defineAsyncComponent to do this:

import { useModal } from 'vue-final-modal'
import { defineAsyncComponent } from 'vue';

const { open, close } = useModal({
  component: defineAsyncComponent(() => import('./some-component.vue')),
  attrs: {...},
})