Properties

Overview the default value of properties

<template>
  <vue-final-modal
    :name="null"
    :value="false"
    :ssr="true"
    :classes="false"
    overlay-class=""
    content-class=""
    styles=""
    overlay-style=""
    content-style=""
    :lock-scroll="true"
    :hide-overlay="false"
    :click-to-close="true"
    :esc-to-close="false"
    :prevent-click="false"
    :attach="false"
    transition="vfm"
    overlay-transition="vfm"
    :z-index-auto="true"
    :z-index-base="1000"
    :z-index="false"
    :focus-retain="true"
    :focus-trap="false"
  >
    ...modal content
  </vue-final-modal>
</template>

`name`

Type: String
Default: null

Modal name for the API $vfm.show(name), $vfm.hide(name), etc.

v-model is necessary when you open a modal with $vfm.show(name) .

`ssr`

Type: Boolean
Default: true

Enabled Server-Side Rendering.

`classes`

Type: [String, Object, Array]
Default: ''

Custom class names for the modal container.

`contentClass`

Type: [String, Object, Array]
Default: ''

Custom class names for the modal content.

`overlayClass`

Type: [String, Object, Array]
Default: ''

Custom class names for the modal overlay.

`styles`

Type: [String, Object, Array]
Default: ''

Style that will be applied to the modal container.

`contentStyle`

Type: [String, Object, Array]
Default: ''

Style that will be applied to the modal content.

`overlayStyle`

Type: [String, Object, Array]
Default: ''

Style that will be applied to the modal overlay.

`transition`

Type: [String, Object]
Default: 'vfm'

CSS transition applied to the modal container.

Show default transition CSS

.vfm-enter-active,
.vfm-leave-active {
  transition: opacity 0.2s;
}
.vfm-enter,
.vfm-leave-to {
  opacity: 0;
}

Show example transition Object

<template>
  <vue-final-modal
    :transition="{
      'enter-active-class': 'transition duration-200 ease-in-out transform',
      'enter-from-class': 'translate-y-full',
      'enter-to-class': 'translate-y-0',
      'leave-active-class': 'transition duration-200 ease-in-out transform',
      'leave-to-class': 'translate-y-full',
      'leave-from-class': 'translate-y-0'
    }"
  >
    ...modal content
  </vue-final-modal>
</template>

`overlayTransition`

Type: [String, Object]
Default: 'vfm'

CSS transition applied to the modal overlay.

Show default transition CSS

.vfm-enter-active,
.vfm-leave-active {
  transition: opacity 0.2s;
}
.vfm-enter,
.vfm-leave-to {
  opacity: 0;
}

Show example transition Object

<template>
  <vue-final-modal
    :transition="{
      'enter-active-class': 'transition duration-200 ease-in-out transform',
      'enter-from-class': 'translate-y-full',
      'enter-to-class': 'translate-y-0',
      'leave-active-class': 'transition duration-200 ease-in-out transform',
      'leave-to-class': 'translate-y-full',
      'leave-from-class': 'translate-y-0'
    }"
  >
    ...modal content
  </vue-final-modal>
</template>

`lockScroll`

Type: Boolean
Default: true

Disabled the scrolling of body while the modal is displayed.

Using body-scroll-lock to implement the feature.

`hideOverlay`

Type: Boolean
Default: false

Hiding the display of the overlay.

`clickToClose`

Type: Boolean
Default: true

Enabled closing the modal by clicking overlay of the modal.

`escToClose`

Type: Boolean
Default: false

Press esc to close the modal.

`preventClick`

Type: Boolean
Default: false

The click event will not be blocked by overlay.
Set the root element of vue-final-modal style to pointer-events: none;.

`attach`

Type: Any
Default: false

Specifies which DOM element that this component should detach to.

Set false will disabled this feature.
String can be any valid querySelector, e.g. 'body', '#app'.
Object can be any valid Node, e.g. this.$refs.container.

`zIndexAuto`

Type: Boolean
Default: true

Auto binding z-index base on the prop zIndexBase and adding 2 by each stackable modal. If zIndex is set, zIndexAuto, zIndexBase will be ignored.

`zIndexBase`

Type: [String, Number]
Default: 1000

Calculate z-index automatically with zIndexBase. If zIndex is set, zIndexAuto, zIndexBase will be ignored.

`zIndex`

Type: [String, Number]
Default: false

Set specific z-index to root of the modal element. If zIndex is set, zIndexAuto, zIndexBase will be ignored.

`focusRetain`

Type: Boolean
Default: true

Focus the modal vfm__container after the modal enter.

`focusTrap`

Type: Boolean
Default: false

Enables focus trap meaning that only inputs/buttons that are withing the modal window can be focused by pressing Tab (plugin uses very naive implementation of the focus trap).