vue-modal

v-model

Pass a Boolean value to the v-model directive to show and hide the modal window.

The Plugin API exposes show/hide functions that can be called within any component to show and hide the modal window with the given name.
In order to use the Plugin API you need to import and register the modalPlugin.

The functions are available through:

useModal in Composition API
this.$modal in Options API

Functions

show(name: string): void : Shows the modal with the given name prop
hide(name: string): void : Hides the modal with the given name prop
hideAll(): void - Hides all modals

Props

Prop	Description	Type	Default
name	The name of the modal to use with the show / hide functions.	String	Empty
title	The title of the modal element	String	Empty
baseZindex	The z-index style attribute of the modal window	Number	1051
wrapperClass	Extra CSS classes for the modal wrapper	String, Object, Array	Empty
bgClass	Extra CSS classes for the modal backdrop	String, Object, Array	Empty
modalClass	Extra CSS classes for the modal element	String, Object, Array	Empty
modalStyle	Extra CSS styles for the modal element	Object	Empty
inClass	Animation class for the modal intro	String, Object, Array	vm-fadeIn
outClass	Animation class for the modal outro	String, Object, Array	vm-fadeOut
bgInClass	Animation class for the modal backdrop intro	String, Object, Array	vm-fadeIn
bgOutClass	Animation class for the modal backdrop outro	String, Object, Array	vm-fadeOut
appendTo	Element (selector) in which the modal is to be inserted to, e.g '#modal-host' This option should not be changed at runtime	String	body
live	Controls whether the modal renders dynamically or stays hidden in the DOM This option should not be changed at runtime	Boolean	false
enableClose	Controls whether the modal window is closable or not	Boolean	true
modelValue	Opens and closes the modal window, this is used by `v-model` internally.	Boolean	false
closeLabel	The aria-label attribute of the close button	String	Close

Slots

default

The default slot to use for the content of the modal.

titlebar

The slot to use for overriding the titlebar of the modal

Default value:

<div class="vm-titlebar">
  <h3 class="vm-title">
    {{ title }}
  </h3>
  <button
    v-if="enableClose"
    type="button"
    class="vm-btn-close"
    @click.prevent="close"
  ></button>
</div>

content

The slot to use for overriding the content of the modal

Default value:

<div class="vm-content">
  <slot></slot>
</div>

Events

Name	Description
update:modelValue	Event that is emitted when the component’s model changes
before-open	Event that is emitted before the modal opening transition starts
opening	Event that is emitted while the modal opening transition is in progress
opened	Event that is emitted when the modal is visible and the opening transition ended
before-close	Event that is emitted before the modal closing transition starts
closing	Event that is emitted while the modal closing transition is in progress
closed	Event that is emitted when the modal is no longer visible and the closing transition ended