Events

`@before-open`

Emits while modal is still invisible, but was added to the DOM. Further opening of the modal can be blocked from this event listener by calling event.cancel() .

`@opened`

Emits after modal became visible or started transition.

`@before-close`

Emits before modal is going to be closed. Further closing of the modal can be blocked from this event listener by calling event.cancel() .

`@closed`

Emits right before modal is destroyed.

`@loadstart`

Info

For async components only.

Emits as soon as the component has started loading and the loader is shown.

`@loaded`

Info

For async components only.

Emits after the component has finished loading, and the DOM is showing the modal content instead of the loader.

Event cancellation

Opening and closing can be canceled by calling event.cancel() function in either before-open or before-close event handlers.

Custom events

You can pass data from dynamic modals back to the parent component by emitting custom events. Simply call this.$emit('my-custom-event', data) from the modal component.

Examples

Static modal:

<template>
  <modal name="example"
         @before-open="beforeOpen"
         @before-close="beforeClose">
    <span>Hello, {{ name }}!</span>
  </modal>
</template>
<script>
export default {
  name: 'Example',
  data () {
    return {
      name: 'Tom'
    }
  },
  methods: {
    beforeOpen (event) {
      console.log('Opening...')
    },
    beforeClose (event) {
      console.log('Closing...')
      // What a gamble... 50% chance to cancel closing
      if (Math.random() < 0.5) {
        event.cancel()
      }
    }
  }
}
</script>

Dynamic modal:

<script>
export default {
  name: 'Example',
  data () {
    return {
      name: 'Tom'
    }
  },
  methods: {
    openModal () {
      this.$modal.show({
        template: `
            <div class="example-modal-content">
              <span>Hello, {{ name }}!</span>
              <button @click="sendData">Send data to parent</button>
            </div>
          `,
        props: ['name'],
        emits: ['my-custom-event'],
        methods: {
          sendData() {
            this.$emit('my-custom-event', { data: 'Hello World!' })
          }
        }
      }, {
        name: this.name
      }, {
        width: 300,
        height: 300
      }, {
        'before-open': this.beforeOpen,
        'before-close': this.beforeClose,
        'my-custom-event': this.handleCustomEvent
      })
    },
    beforeOpen (event) {
      console.log('Opening...')
    },
    beforeClose (event) {
      console.log('Closing...')
      // What a gamble... 50% chance to cancel closing
      if (Math.random() < 0.5) {
        event.cancel()
      }
    },
    handleCustomEvent (data) {
      console.log(data)
    }
  }
}
</script>

Async modal:

<script>
import { defineAsyncComponent } from 'vue'

const MyAsyncComponent = defineAsyncComponent(async () => import('./components/MyComponent.vue'))

export default {
name: 'Example',
  methods: {
    openModal () {
      this.$modal.show(
        MyAsyncComponent,
        {},
        {
          height: 'auto',
          loader: true
        },
        {
          loadstart: this.loadStartEvent,
          loaded: this.loadedEvent,
        }
      )
    },
    loadStartEvent (event) {
      console.log('Loading...')
    },
    loadedEvent (event) {
      console.log('Loading completed.')
    }
  }
}
</script>