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.