useVfm()

Usage

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

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

Global state

• vfm.modals: All modals including opened and closed modals.
• vfm.openedModals: All opened modals.

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, show?): Toggle a modal by given a modalId, or open it with show: true and close it with show: false

  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 opened modals. It resolves with the Promise.allSettled() results of their closing.

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

get(), toggle(), open() and close() return undefined when no modal has that modalId. Their promises always settle: with 'opened' or 'closed', or with a message when the modal did not get there, see what open() and close() resolve with.

Type Declarations

Read more in Get Started > Guide > Types.