Use Vue.js Bootstrap Modal Component

By Mohit Tanwani Last updated Dec 7, 2017

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.

Vue.js Bootstrap Modal

Use Vue.js Bootstrap Modal Component

Install Vue.js App With Bootstrap

Import and Use Bootstrap Modal

Leave a Reply