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
    })
    
  • vfm.open(modalId): Open a modal by given a modalId
    vfm.open(modalId).then(() => {
      // Do something after the modal opened
    })
    
  • vfm.close(modalId): Close a modal by given a modalId
    vfm.close(modalId).then(() => {
      // Do something after the modal closed
    })
    
  • vfm.closeAll(): Close all modals
    vfm.closeAll().then(() => {
      // Do something after all modals closed
    })
    

Type Declarations