Vue JS Bootstrap Modal Popup Tutorial Example

If you want your site visitors or site users to give attention to a specific task, so modal component is the one you are looking for.

Today, in this Vue Js Bootstrap Modal example tutorial, we will answer the following:

How to implement bootstrap modal in the Vue js,

How to create reusable Bootstrap Modal popup component in Vue

How to create device-friendly responsive modals in the vue app using the bootstrap package.

In this Vue Js Bootstrap Modal example, you will learn how to create a Bootstrap modal with the help of the b-modal directive of bootstrap vue. Furthermore, you will learn how to add a simple modal dialog in vue, change the size of the bootstrap modals, and change the position of the vue modal in the viewport.

Vue Js Reusable Bootstrap Modal Example

  • Step 1: Create Vue Js Project
  • Step 2: Install Bootstrap Packages
  • Step 3: Add Simple Bootstrap Modal
  • Step 4: Implement Bootstrap Modal in Vue
  • Step 5: Init App in Browser

Install Vue Project

If you haven’t set up the Vue js development environment, here are the commands that let you install vue cli, a new vue project, and take you inside the project folder.

So, let’s hit the road.

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app

Install Bootstrap Packages

You can easily install the Bootstrap package into the vue and run the following command to add both packages together.

npm install vue bootstrap bootstrap-vue

Modals are streamlined but flexible dialog prompts powered by JavaScript and CSS. They support several use cases from user notification to completely custom content and feature a handful of helpful subcomponents, sizes, variants, accessibility, and more.

We have installed the libraries but you can show and customize bootstrap modals only after adding the Bootstrap modules in the src/main.js configuration file.

import Vue from 'vue'
import App from './App.vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

new Vue({
  render: h => h(App),
}).$mount('#app')

Integrate Bootstrap Modal in Vue

In this step, we will how you how to create a reusable Modal component in Vue js, consequently, first create the ModalComp.vue file in the components folder.

Immediately after paste the following code in the components/ModalComp.vue file

<template>
    <div>
      <b-button v-b-modal.modal-center>Vue Bootstrap Modal Example</b-button>

      <b-modal id="modal-center" centered title="Vue Bootstrap Centered Modal Example">
        <p class="my-4">Knowing yourself is the beginning of all wisdom.</p>
      </b-modal>
    </div>    
</template>

<script>
  export default {
    data() {
      return { }
    }
  }
</script>

As you can see, we have shown how to add modal in vue using Bootstrap, you customize your modal without writing much less custom code.

For instance, changing the size of the bootstrap modal, passing events, changing the position of the modal is excessively easy.

Here is the link that guides you more on vue bootstrap modals.

Finally, update the src/App.vue file with the following code.

<template>
  <div class="container mt-5">
    <ModalComp/>
  </div>
</template>

<script>
    import ModalComp from './components/ModalComp.vue'

    export default {
      name: 'App',
      components: {
        ModalComp
      } 
    }
</script>

Init App in Browser

Yes, this is the command you need to execute right now to view the app in the browser.

So why wait?

Head over to the terminal type command and hit enter to use the bootstrap modal in vue.

npm run serve

vue js modal bootstrap

Conclusion

The idea of incorporating modal dialog boxes in vue js and use modal in vue primarily revolves around a modern CSS framework that is Bootstrap. On the other hand, there is a BootstrapVue library in vue to streamline the Bootstrap JavaScript components.

This prodigy amplifies the usage of JavaScript components without using any third-party scripts and lets you use them relentlessly in the vue ecosystem. So, eventually, the vue js modal example is over.