25-Jul-2020
.
Admin
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...
#Bootstrap
#Bootstrap 4
#Html
#Css
#Vue.Js
