A Vue 3 library to create modals that are resolved with promises.
A Vue 3 library to create modals that are resolved with promises.
A demo of this library is available at vue-promise-modals.andrewbast.in.
bash
$ npm install vue-promise-modals
` - Install the plugin on the Vue app
js
import App from "./App.vue"
import { createApp } from "vue"
import VuePromiseModalsPlugin from "vue-promise-modals"
createApp(App)
.use(VuePromiseModalsPlugin, {
// Options go here
})
` - Define DialogHost component on the component where you want to render the modals.
vue
...
...
`Usage
vue-promise-modals exposes a useModals composable that returns the openModal function that can be used to open modals. The modals are 'resolved' using either the modal-resolve (for successful completion) or modal-reject (for failure) events.$3
vue
`$3
vue
`$3
Transition animations can be applied to the modals by passing in the options in the Vue plugin. The plugin options follow the same options as the props accepted by the Vue TransitionGroup element.`js
import { createApp } from 'vue'
import App from './App.vue'
import { plugin } from "vue-promise-modals"createApp(App)
.use(plugin, {
transition: {
name: "modal" // Uses the modal-* classes for transition animations for the modals
}
})
.mount('#app')
``