Bootstrap Modal Component for Vue 2.x.

Updated package to exclude bootstrap css and js, you need to install bootstrap-loader.


    npm install vue2-bootstrap-modal --save


Require the component (globally or in another component)

components: {
    'bootstrap-modal': require('vue2-bootstrap-modal')

Then in your template:

<bootstrap-modal ref="theModal" :need-header="false" :need-footer="false" :size="'large'" :opened="myOpenFunc">
<div slot="title">
    Your title here
<div slot="body">
    Your body here
<div slot="footer">
    Your footer here

Finally call and theModal.close() whenever you need.


Modal functions and callbacks are exposed through the ref variable

open() function

Opens the modal

close() function

Closes the modal

opened callback

Called after modal is opened. Pass your own method to be called

closed callback

Called after modal is closed. Pass your own method to be called

need-header boolean

True if you need to show the header

Default value is true

need-footer boolean

True if you need to show the footer

Default value is true

size string

Use one of these values to change the modal size

Value Bootstrap class
small modal-sm
medium modal-md
large modal-lg
full modal-full

Default value is empty


See index.html for example use


Expose configuration, like backdrop darkness value

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build