useVfm()

useVfm() provides global state for the modal components and also provides functions that can be used to control the modal components.

Usage

<script setup lang="ts">
import { useVfm } from 'vue-final-modal'

const vfm = useVfm()
const {
  modals,
  openedModals,
  dynamicModals,
  get,
  toggle,
  open,
  close,
  closeAll,
} = vfm
</script>

Global state

• vfm.modals: All modals including opened and closed modals.
• vfm.openedModals: All opened modals including opened vfm.modals and opened vfm.dynamicModals.
• vfm.dynamicModals: All opened dynamic modals that create by useModal().

Functions

vfm instance provides some utility functions that allows you to operate a modal (see modalId) or modals.

• vfm.get(modalId): Get a modal instance by given a modalId
• vfm.toggle(modalId): Toggle a modal by given a modalId

  vfm.toggle(modalId).then(() => {
    // Do something after the modal opened or closed
  })
  

  Copy to clipboard
• vfm.open(modalId): Open a modal by given a modalId

  vfm.open(modalId).then(() => {
    // Do something after the modal opened
  })
  

  Copy to clipboard
• vfm.close(modalId): Close a modal by given a modalId

  vfm.close(modalId).then(() => {
    // Do something after the modal closed
  })
  

  Copy to clipboard
• vfm.closeAll(): Close all modals

  vfm.closeAll().then(() => {
    // Do something after all modals closed
  })
  

  Copy to clipboard

Type Declarations