We can easily use Vue.js bootstrap modal component in our Vue.js app with BootstrapVue.
BootstrapVue provides the native bootstrap components that can be integrated with Vue.js.
So, let’s get started with Vue.js bootstrap modal component.
Install Vue.js App With Bootstrap
Vue CLI will help us to install and set up Vue.js app along with basic scaffolding.
First of all, you can make sure that you’ve Vue CLI installed and up to date.
# Ensure vue-cli is installed and up to date npm i -g vue-cli
Now, let’s initialize a project with bootstrap vue.
vue init bootstrap-vue/webpack-simple my-project
Note: If you’ve already app installed and set up, you can use below command to install bootstrap-vue in your existing app.
npm i bootstrap-vue bootstrap@4.0.0-beta.2
Now, we’re ready to use the bootstrap modal component in our Vue.js app.
Import and Use Bootstrap Modal
First of all, we should import the required bootstrap components and directives in main.js which we gonna use in our app.
Like we’re going to use button and modal in our app. So, let’s import them in main.js.
//Import bootstrap modal import bModal from 'bootstrap-vue/es/components/modal/modal' //Import bootstrap modal directive import bModalDirective from 'bootstrap-vue/es/directives/modal/modal' //Import bootstrap button import bButton from 'bootstrap-vue/es/components/button/button';
Next, we need to call them globally to use them in the template.
Vue.component('b-btn', bButton);
Vue.component('b-modal', bModal);
Vue.directive('b-modal', bModalDirective);
Next, let’s add bootstrap CSS in the index.html file.
<!-- Add this to <head> --> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css"/>
Finally, add the b-modal in the template file to render the modal popup.
<b-btn v-b-modal.modal1>Launch demo modal</b-btn> <!-- Modal Component --> <b-modal id="modal1" title="Bootstrap-Vue"> <p class="my-4">Hello from Vue.js Bootstrap Modal Component!</p> </b-modal>
Now, let’s run your app.
npm run dev
This will show the below message on the terminal screen.
Your application is running here: https://www.thetechieshouse.com:8080
Thats it! You can run your app @ https://www.thetechieshouse.com:8080 in the browser window.
The following is the full code on Vue.js bootstrap modal component integration.
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
//Import Vue
import Vue from 'vue'
//Import app component
import App from './App'
//Import router
import router from './router'
//Import bootstrap modal
import bModal from 'bootstrap-vue/es/components/modal/modal'
//Import bootstrap modal directive
import bModalDirective from 'bootstrap-vue/es/directives/modal/modal'
//Import bootstrap button
import bButton from 'bootstrap-vue/es/components/button/button';
Vue.component('b-btn', bButton);
Vue.component('b-modal', bModal);
Vue.directive('b-modal', bModalDirective);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <!-- Add this to <head> --> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css"/> <title>setup-vuejs</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
<template>
<div id="app">
<b-btn v-b-modal.modal1>Launch demo modal</b-btn>
<!-- Modal Component -->
<b-modal id="modal1" title="Bootstrap-Vue">
<p class="my-4">Hello from modal!</p>
</b-modal>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Moreover, if you are looking to have few more options on modal pop up, you can visit BootstrapVue modal document.
Leave a Reply