vmodal

A Vue component for Bootstrap modals.

Installation

npm install --save vmodal 

Usage

See the included examples.

JavaScript

import Vue from 'vue'
import Modal from 'vmodal'

Vue.component('modal', Modal)

new Vue({
  el: '#app',

  methods: {
    showModal () {
      this.$refs.modal.show()
    }
  }
})

HTML

<div id="app">
  <modal ref="modal">
    <h5 slot="title">Modal title</h5>
    
    <template slot="body">
      <p>Modal body text goes here.</p>
    </template>

    <template slot="footer">
      <button type="button" class="btn btn-primary">Save changes</button>
      <button type="button" class="btn btn-secondary">Close</button>
    </template>
  </modal>

  <button @click="showModal" type="button" class="btn btn-primary">Show Modal</button>
</div>

Api

Methods

| Name | Description | | :--- | :--- | | show | Show the modal. | | hide | Hide the modal. | | toggle | Toggle the modal. |

Example:

this.$refs.modal.show()

Props

| Name | Type | Default | Description | | :--- | :--- | :--- | :--- | | backdrop | Boolean|String | true | Includes a modal-backdrop element or static for a backdrop which doesn't close the modal on click. | | close | Boolean | true | Show close × button. | | focus | Boolean | true | Puts the focus on the modal when initialized. | | keyboard | Boolean | true | Closes the modal when escape key is pressed. | | size | String | | Optional size: sm, lg or xl. | | form | Object | | A vform object. |

Events

| Name | Attributes | Description | | :--- | :--- | :--- | | submit | (event) | Emitted when the form is submitted. | | show | (event) | Emitted immediately when the show method is called. | | shown | (event) | Emitted when the modal has been made visible to the user. | | hide | (event) | Emitted immediately when the hide method has been called. | | hidden | (event) | Emitted when the modal has finished being hidden from the user. |

Example:

this.$refs.modal.$on('shown', (e) => {
  console.log('Modal shown')
})

Slots

| Name | Description | | :--- | :--- | | title | The modal title. | | body | The modal body. | | footer | The modal footer. | | header | The modal header. | | content | The modal content. |