API Reference

Usage

$vfm is an object containing VueFinalModal's data/methods.

Options API

Just use this.$vfm.

Composition API Vue 3 only

import { inject } from 'vue'

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

API

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 | Promise
    Example 
    this.$vfm.show('example', { userName: 'vue-final-modal' })
  .then(() => {
    // do something on modal opened
  })
    Modal.vue
    <template>
  <vue-final-modal v-model="show" name="example">
    <template v-slot:title>$vfm.show</template>
    <template v-slot="{ params }">
      Hi {{ params.userName }}
    </template>
  </vue-final-modal>
</template>
<script>
  export default {
    data: () => ({
      show: false
    })
  }
</script>
    v-model is necessary when you open a modal with $vfm.show(name) API.

    hide([names])

    • Type: Function
    • Arguments:
      • names: String - The names to hide
    • Returns: Promise | Promise
      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>

      hideAll()

      • Returns: Promise | Promise

        hide all modals.

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

        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 | Promise

          toggle modals by name.

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

          get([names])

          • Type: Function
          • Arguments:
            • names: String - Get the names of the modal instances
          • Return:
            • Array: returns the modal instances

          openedModals

          • Return:

            • Array: returns the opened modal instances.

          • Examples:

          1. $vfm.openedModals[0]: get the first opened modal instance.
          2. $vfm.openedModals.length: get how many modals was opened.

          modals

          • Return:
            • Array: returns all modal instances.
Edit this page on GitHub Updated at Fri, May 7, 2021
Scoped Slots Dynamic modal