API Reference

Usage

Directly import

import { $vfm } from 'vue-final-modal'

Options API

If you register plugin globally. Just use this.$vfm.

Composition API

If you register plugin globally. You can use inject('$vfm') in setup.

import { inject } from 'vue'

export default {
  setup() {
    const $vfm = inject('$vfm')
  }
}

API

$vfm.show(name, params)

• Type: Function

• Arguments:

  • name: String - Name of the modal
  • params: ?: object - Any data that you want to pass into the modal, checkout the guide params.

• Returns: Promise<Object> | Promise<Array>

• Example:

  $vfm.show

  Hi

  confirm cancel

  👉 Open modal
  <template>
    <vue-final-modal v-model="show" name="example">
      <template #title>$vfm.show</template>
      <template #default="{ params }">
        Hi {{ params.userName }}
      </template>
    </vue-final-modal>
  </template>
  <script>
    export default {
      data: () => ({
        show: false
      })
    }
  </script>
  

  this.$vfm.show('example', { userName: 'vue-final-modal' })
    .then(() => {
      // do something on modal opened
    })
  

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

$vfm.hide([names])

• Type: Function

• Arguments:

  • names: String - The names to hide

• Returns: Promise<Object> | Promise<Array>

• Example:

  <template>
    <vue-final-modal v-model="show" name="example">Vue Final Modal is awesome</vue-final-modal>
    <vue-final-modal v-model="show2" name="example2">Vue Final Modal is awesome 2</vue-final-modal>
  </template>
  

  <script>
    export default {
      data: () => ({
        show: true,
        show2: true
      }),
      mounted() {
        this.$vfm.hide('example', 'example2').then(() => {
          // do something on modal closed
        })
      }
    }
  </script>
  

$vfm.hideAll()

• Returns: Promise<Object> | Promise<Array>

• Example:

  this.$vfm.hideAll().then(() => {
    // do something on all modals closed
  })
  

Hide all modals.

this.$vfm.hideAll().then(() => {
  // do something on all modals closed
})

$vfm.toggle(name, show, params)

• Type: Function

• Arguments:

  • name: [String | Array] - The names of the modal
  • show: ?: Boolean - Show modal or not
  • params: ?: object - Any data that you want to pass into the modal, checkout the guide params.

• Returns: Promise<Object> | Promise<Array>

• Example:

  this.$vfm.toggle('myModal').then(() => {
    // do something on modals opened or closed, it depends on params `show` is true or false
  })
  

Toggle modals by name.

$vfm.get([names])

Get the modal instances by modal names.

• Type: Function
• Arguments:
  • names: String
• Return:
  • Array: returns the modal instances
• Example:

  const modals = this.$vfm.get('modalName1', 'modalName2', ...)
  

$vfm.openedModals

• Return:
  • Array: returns the opened modal instances.
• Examples:
  • get the first opened modal instance

      this.$vfm.openedModals[0]
    

  • get how many modals was opened

      this.$vfm.openedModals.length
    

$vfm.modals

• Return:
  • Array: returns all modal instances.
• Examples:
  • get the first created modal instance

      this.$vfm.modals[0]
    

  • get how many modals was created

      this.$vfm.modals.length