<VueFinalModal>

Template structure

This is the simplify template of the <VueFinalModal>. It will be helpful for understanding the naming of props.

<template>
  <div class="vfm">
    <transition v-bind="overlayTransition">
      <div class=vfm__overlay></div>
    </transition>
    <transition v-bind="contentTransition">
      <div class=vfm__content>
        <slot />
        <div class="vfm-swipe-banner-container"></div>
      </div>
    </transition>
  </div>
</template>

Props

teleportTo

• Description:
  • Set null | false to disable teleport.
  • Checkout the Nuxt 3 teleport for the reason why the default value have to be 'body'.
• Type:
  • JS: [String, null, Boolean, Object]
  • TS: PropType<string | RendererElement | null | false>
• Default: 'body'

modalId (optional)

modalId should be an uniq value for the operation of a modal via useVfm().

• Type:
  • JS: [String, Number, Symbol]
  • TS: PropType<ModalId>

    export type ModalId = number | string | symbol
    

    Copy to clipboard

    import { ModalId } from 'vue-final-modal'
    

    Copy to clipboard
• Default: undefined

modelValue (optional)

Display the modal or not.

• Type:
  • JS: Boolean
  • TS: PropType<boolean>
• Default: undefined

displayDirective

Render the modal via 'if', 'show' or 'visible' directive. If you need to keep the modal alive, you can use 'show' or 'visible' directive. for example if you have a draggable and resizable modal and need to keep the size and position of the modal while re-open it (see example).

• Type:
  • JS: 'if' | 'show' | 'visible'
  • TS: PropType<'if' | 'show' | 'visible'>
• Default: 'if'

hideOverlay

Hide the overlay or not.

• Type:
  • JS: Boolean
  • TS: PropType<boolean>
• Default: undefined

overlayTransition

This prop allow you to setup the transition for .vfm__overlay element. You can pass a transition name or use the built-in transition name provide by vue-final-modal including 'vfm-fade', 'vfm-slide-down', 'vfm-slide-up', 'vfm-slide-right', 'vfm-slide-left'. You can also pass the TransitionProps to customize your own transition.

• Type:
  • JS: [String, Object]
  • TS: PropType<string | 'vfm-fade' | 'vfm-slide-down' | 'vfm-slide-up' | 'vfm-slide-right' | 'vfm-slide-left' | TransitionProps>
• Default: undefined

contentTransition

This prop allow you to setup the transition for .vfm__content element. You can pass a transition name or use the built-in transition name provide by vue-final-modal including 'vfm-fade', 'vfm-slide-down', 'vfm-slide-up', 'vfm-slide-right', 'vfm-slide-left'. You can also pass the TransitionProps to customize your own transition.

• Type:
  • JS: [String, Object]
  • TS: PropType<string | 'vfm-fade' | 'vfm-slide-down' | 'vfm-slide-up' | 'vfm-slide-right' | 'vfm-slide-left' | TransitionProps>
• Default: undefined

overlayClass

Bind class to .vfm__overlay element.

• Type:
  • JS: [Object, Array, String]
  • TS: [Object, Array, String] as unknown as PropType<any>
• Default: undefined

contentClass

Bind class to .vfm__content element.

• Type:
  • JS: [Object, Array, String]
  • TS: [Object, Array, String] as unknown as PropType<any>
• Default: undefined

overlayStyle

Bind style to .vfm__overlay element.

• Type:
  • JS: [String, Object, Array]
  • TS: PropType<StyleValue>

    export type StyleValue = string | CSSProperties | (string | CSSProperties)[]
    

    Copy to clipboard

    import { StyleValue } from 'vue-final-modal'
    

    Copy to clipboard
• Default: undefined

contentStyle

Bind style to .vfm__content element.

• Type:
  • JS: [String, Object, Array]
  • TS: PropType<StyleValue>

    export type StyleValue = string | CSSProperties | (string | CSSProperties)[]
    

    Copy to clipboard

    import { StyleValue } from 'vue-final-modal'
    

    Copy to clipboard
• Default: undefined

clickToClose

Can be closed by clicking the .vfm element.

• Type:
  • JS: Boolean
  • TS: PropType<boolean>
• Default: true

escToClose

Can be closed by keypress esc.

• Type:
  • JS: Boolean
  • TS: PropType<boolean>
• Default: true

background

Is it allow to interact with background of the modal.

• Type:
  • JS: 'interactive' | 'non-interactive'
  • TS: PropType<'interactive' | 'non-interactive'>
• Default: 'non-interactive'

focusTrap

• Description:
  • Set false to disable the focusTrap.
  • For more information on what options can be passed, see createOptions in the focus-trap documentation.
• Type:
  • JS: [Boolean, Object]
  • TS: PropType<false | Options>
• Default: () => ({ allowOutsideClick: true })

lockScroll

Lock body scroll or not when the modal is opened.

• Type:
  • JS: Boolean
  • TS: PropType<boolean>
• Default: true

reserveScrollBarGap

Creates a padding-right when scroll is locked to prevent the page from jumping.

• Type:
  • JS: Boolean
  • TS: PropType<boolean>
• Default: true

zIndexFn

Define how to increase the zIndex when there are nested modals.

• Type:
  • JS: Function
  • TS: PropType<(context: { index: number }) => number | undefined>
• Default: ({ index }: { index: number }) => 1000 + 2 * index
  • index is the index order of the opened modals

swipeToClose

The direction of swiping to close the modal

• Type:
  • JS: 'none' | 'up' | 'right' | 'down' | 'left'
  • TS: PropType<'none' | 'up' | 'right' | 'down' | 'left'>
• Default: 'none'

threshold

Threshold for swipe to close

• Type:
  • JS: Number
  • TS: PropType<number>
• Default: 0

showSwipeBanner

If set :showSwipeBanner="true", only allow clicking swipe-banner slot to swipe to close

• Type:
  • JS: Boolean
  • TS: PropType<boolean>
• Default: undefined

preventNavigationGestures

When set :preventNavigationGestures="true", there will be two invisible bars for prevent navigation gestures including swiping back/forward on mobile webkit. For example: Safari mobile.

• Type:
  • JS: Boolean
  • TS: PropType<boolean>
• Default: undefined

Events

• (e: 'beforeOpen', event: { stop: () => void }): void: Emits while modal is still invisible, but before transition starting.
  • event.stop() is use to prevent the modal from opening.
• (e: 'opened'): void: Emits after modal became visible and transition ended.
• (e: 'beforeClose', event: { stop: () => void }): void: Emits before modal is going to be closed.
  • event.stop() is use to prevent the modal from closing.
• (e: 'closed'): void: Emits right before modal is destroyed.
• (e: 'clickOutside'): void: Emits while .vfm element on click.

Slots

• The default slot can be used to render the modal content.

You can also use scoped slots to close modal, for example:

<VueFinalModal>
  <template #default="{ close }">
    <button @click="() => close()">
      Cancel
    </button>
  </template>
</VueFinalModal>

• The swipe-banner slot can be used to define the area that can be swipe to close