Bootstrap vue modal

bootstrap-vue-modal.markdown

Bootstrap vue modal

A Pen by Lakshya Khera on CodePen.

License.

index.html

<div id="app">
  <p>{{message}}</p>
  <div>
  <b-button v-b-modal.modal-1>Launch demo modal</b-button>

  <b-modal id="modal-1" title="BootstrapVue">
    <p class="my-4">Hello from modal!</p>
  </b-modal>
</div>
</div>

script.js

// Install BootstrapVue
Vue.use(BootstrapVue)
var app = new Vue({
  el:'#app',
  data: {
    message:"Hello world"
  }
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.15.0/bootstrap-vue.min.js"></script>

styles

<link href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" rel="stylesheet" />