Vue js bootstrap modal; Through this tutoiral, i am going to show you how to use bootstrap modal in vue js or How to open bootstrap modal in VueJS.
How to Add and Use Bootstrap Modal in Vue Js App
This tutorial will show you multiple examples of how to use bootstrap modal in vue js:
Example 1 – Bootstrap Modal in Vue JS
<!DOCTYPE html>
<html>
<head>
<title>Vue.Js Bootstrap Modal Example Tutorial - Laratutorials.com</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 - laratutorials.com</h5>
<button type="button" class="btn btn-primary" @click="showModel = true" >
Open modal
</button>
<model v-if="showModel" @close="showModel = false">
<p>Laratutorials.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>
The following code is used to show bootstrap modal in vue js:
<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>
Conclusion
Vue js bootstrap modal example tutorial, you have learn how to use bootstrap modal in vue js.
Recommended Vue JS Tutorials
Recommended:-Vue Js If Else Condition Example
Recommended:-Vue Js For Loop (v-for) Example
Recommended:-Vue JS Ajax Form Submit Tutorial
Recommended:-Vue Js Add Class To Element On Click Tutorial
Recommended:-Vue JS Checkbox Checked Event Tutorial
Recommended:-Laravel 8 Vue JS Axios Post Request Tutorial Example
Recommended:-How to Show Flash Message Using Vue JS in Laravel 8
Recommended:-How to Create Laravel 8 Vue JS Like Dislike System
Recommended:-Laravel 8 Vue JS Image/File Upload Tutorial Example