Usage.md

sidebarDepth
2

Usage

Configuration

Configuration options can be passed as a second argument to Vue.use.

import VModal from 'vue-js-modal'

Vue.use(VModal, { ... })

dialog: Boolean

Enables dialogs.

---

componentName: String

Changes component name from "Modal" to any other string value. It is useful when there is already a global "modal" component.

Vue.use(VModal, { componentName: 'Foo' })

<foo name="example">This is a modal</foo>

---

dynamicDefaults: object

Default properties that are injected into dynamic modals.

Vue.use(VModal, { dynamicDefaults: { draggable: true, resizable: true } })

API

Plugin API can be called within any component through this.$modal:

---

$modal.show(name, params)

Arguments:

name: string - Name of the modal

params?: object - Any data that you would want to pass into the modal (@before-open event handler will contain params in the event)

Description:

Shows a static modal. Modal component can be defined anywhere within the same or any ancestor component.

<template>
    <modal name="example">This is an example</modal>
</template>

<script>
export default {
    name: 'MyComponent',
    mounted () {
        this.$modal.show('example')
    }
}
</script>

$modal.show(component, componentProps, modalProps, modalEvents)

used to show a dynamic modal at runtime

$modal.hide(name)

hide the modal with the given name property

$modal.hideAll()

hide all modals in the application