Skip to content

Modal v-modal-open v-modal-close v-modal-close-all

The modal directive allows you to open and close modals from any element.

v-modal-open

Pass the id of the modal you want to open to the v-modal-open directive.

vue
<button v-modal-open="'my-modal'">Open Modal</button>
<button v-modal-open="'my-modal'">Open Modal</button>

v-modal-close

Closes the currently active (last in stack) modal. You can also provide the id of the modal you want to close.

vue
<button v-modal-close>Close Modal</button>
<button v-modal-close="'my-modal'">Close Modal</button>
<button v-modal-close>Close Modal</button>
<button v-modal-close="'my-modal'">Close Modal</button>

v-modal-close-all

Closes all modals.

vue
<button v-modal-close-all>Close</button>
<button v-modal-close-all>Close</button>

Released under the MIT License.