vue-root-modals
A handy promise-based library for modal windows.
Demo
Install
Via Yarn:
yarn add vue-root-modals
Via NPM:
npm i vue-root-modals
Quick start
vue-root-modals doesn't offer ready-to-use modals, but it allows you easily create your own.
Let's start with SimpleModal.vue
:
{{ text }}
The next step is to create a file which holds all your modals. For example, modals.js
:
;; // Create new instance and pass there our modalconst rootModals = SimpleModal; ;
Then we should import modals.js
inside main.js
and pass RootModals
object to Vue.use()
method. Also you should register the library in components
:
;Vue components: RootModal template: ` <div id="app"> <root-modal></root-modal> <button @click="$modals.SimpleModal">Open Modal</button> </div> `
That's all. You can call modals from anywhere with simple this.$modals.SimpleModal({ options })
now. All modals generate methods based on object key name you have passed to new RootModals({...})
and then they are in $modals
.
All options
are passed to modal as props. Also there are properties resolve
, reject
& modalID
. Thanks to this you can work with modals using promises:
const methods = async { try const response = await this$modals; catch err console; }