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-promise-modals 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')
``