[Vue.js] Bootstrap Modal

Toggle Bootstrap modal via Vue.js. Try demo first:

To toggle Bootstrap modal, the class attribute of the modal is set to "modal fade show". The style of the modal is set to display: none in the beginning to make the modal invisible, and set to display: block to make the modal visible.

The following is the source code for the above demo:


<!-- you can put the following line in your html head -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div id="vueapp">

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" v-on:click="isShowModal = 'block'">
  Launch demo modal

<!-- Modal -->
<div class="modal fade show" v-bind:style="{ display: isShowModal }" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" v-on:click="isShowModal = 'none'">&times;</span>
      <div class="modal-body">
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary"  v-on:click="isShowModal = 'none'">Close</button>


<!-- you can put the following line at the end of html body -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

The variable isShowModal stores the value of display style of the modal. isShowModal is set to none to make the modal invisible, and set to block to make the modal visible.


'use strict';

var app = new Vue({
  el: '#vueapp',
  data: {
    isShowModal: 'none'

Tested on:

  • Chromium 69.0.3497.81 on Ubuntu 18.04 (64-bit)
  • Bootstrap 4.1.3
  • Vue.js 2.5.17


[2]Modal · Bootstrap
[3]Class and Style Bindings — Vue.js