Skip to content

All topics  /  Vue

Vue.Js Bootstrap Modal Example

Vue ·

When “Vue.Js Bootstrap Modal Example” moves through design, development and browser testing, telecommuting versus remote work whats difference can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with Bootstrap before adopting it in production.

Hi Guys,

In this blog, I will explain you how to use bootstrap model in vue.js . I will show example of bootstrap modal in vue.js . you can easily create bootstrap modal using vue.js. <model>, by default, has an close buttons in the footer. These buttons can be customized by setting various props on the component. You can customize the size of the buttons, disable buttons, hide the Close button.

Here, I will give you full example for simply display bootstrap modal using vue.js bellow.

Vue.js Script Code


<script>
  Vue.component('model', {
    template: `<!-- The Modal -->
            <div class="modal" id="myModal" style="display: block;">
              <div class="modal-dialog">
                <div class="modal-content">
                  <!-- Modal Header -->
                  <div class="modal-header">
                    <h4 class="modal-title">Vue.Js Bootstrap Modal Example</h4>
                    <button type="button" class="close" @click="$emit('close')" data-dismiss="modal">×</button>
                  </div>
                  <!-- Modal body -->
                  <div class="modal-body">
                    <slot></slot>
                  </div>
                  <!-- Modal footer -->
                  <div class="modal-footer">
                    <button type="button" @click="$emit('close')" class="btn btn-danger" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
              `
  });

    
  new Vue({ el: '#components-demo',
    data:{
      showModel:false    
    }
  })
</script>

Full Example 

<!DOCTYPE html>
<html>
<head>
   <title>Vue.Js Bootstrap Modal Example</title>
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body class="bg-dark">
   <div class="container">
      <div class="col-md-12 mt-4" id="components-demo">
         <div class="row mt-3">
            <div class="col-md-5 offset-md-3 p-3 shadow-lg" style="border:2px solid red;">
               <h5 class="text-white">Vue Js Bootstrap Modal Example</h5&
               <button type="button" class="btn btn-primary" @click="showModel = true" >
                 Open modal
               </button>
               <model v-if="showModel" @close="showModel = false">
                  <p>Nicesnippets.com</p>
               </model>
            </div>
         </div>
      </div>
   </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script>
Vue.component('model', {
  template: `<!-- The Modal -->
          <div class="modal" id="myModal" style="display: block;">
            <div class="modal-dialog">
              <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                  <h4 class="modal-title">Modal Heading</h4&
                  <button type="button" class="close" @click="$emit('close')" data-dismiss="modal">×</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                  <slot></slot>
                </div>
                <!-- Modal footer -->
                <div class="modal-footer">
                  <button type="button" @click="$emit('close')" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>
            `
});

   
new Vue({ el: '#components-demo',
  data:{
    showModel:false    
  }
})
</script>
</body>
</html>

It will help you...

More on this topic