How to Add and Use Bootstrap Modal in Vue Js App

Last updated on: by Editorial Team

Vue js Bootstrap Modal tutorial; Vue is a notable front-end framework getting popular day by day. It helps you develop robust applications that work flawlessly on any device. The more straightforward mechanism of Vue makes it better than React and Angular.

In this tutorial, we will teach you how to add bootstrap CSS framework in the Vue Js app, how to integrate bootstrap modal in vue using the sublime bootstrap and bootstrap-vue packages.

We will cover how to set up vue environment, how to add essential dependencies with utmost precision similar considering the subtle nuances. Moreover, answer how to add a simple modal in vue and vertically center the bootstrap modal in vue application.

Create Modal Component in Vue using Bootstrap

  • Step 1: Setup Vue Environment
  • Step 2: Create Vue Js Project
  • Step 3: Add Bootstrap Vue Package
  • Step 4: Register Bootstrap Library
  • Step 5: Add Simple Bootstrap Modal
  • Step 6: Vertically Centered Modal
  • Step 7: Multiple Modals in Vue
  • Step 8: Run Vue Application

Setup Vue Environment

First, install the Vue command-line interface tool.

npm install -g @vue/cli

Create Vue Js Project

Secondly, install the latest Vue js project, subsequently, get inside the project folder.

vue create vue-supernova-app
cd vue-supernova-app

Add Bootstrap Vue Package

Next, install the Bootstrap and the bootstrap-vue packages; both the libraries help you develop mobile-first and responsive applications.

# With npm
npm install vue bootstrap bootstrap-vue

# With yarn
yarn add vue bootstrap bootstrap-vue

Register Bootstrap in Vue

In Vue, almost every package has to be registered into the src/main.js file, so you will need to import BootstrapVue and IconsPlugin and inject these into the .use() function.

import Vue from 'vue'
import App from './App.vue'

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)

// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

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

Add Simple Bootstrap Modal in Vue

Implement a simple Bootstrap modal in Vue, add the b-modal attribute with the button. Pass the id to the button corresponding to the bootstrap modal, and the title property shows the primary title of the modal.

<template>
  <div class="container mt-5">
    <div>
      <b-button v-b-modal.modal-1>Show Modal</b-button>

      <b-modal id="modal-1" title="Vue Js Bootstrap Modal Example">
        <p class="my-4">Content goes here...</p>
      </b-modal>
    </div>    
  </div>
</template>

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

Vertically Centered Modal

You can vertically center your modal in the viewport, and it requires no extra coding. The centered prop needs to be assimilated in the b-modal syntax for completing the task.

<template>
  <div class="container mt-5">
    <div>
      <b-button v-b-modal.modal-center>Show Centered Modal</b-button>

      <b-modal id="modal-center" centered title="Vue Bootstrap Centered Modal Example">
        <p class="my-4">Content goes here...</p>
      </b-modal>
    </div>    
  </div>
</template>

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

Multiple Modals in Vue

Bootstrap Vue is no ordinary library; as I said before, it offers innumerable options. If you want to open multiple modals from one modal, here is the solution for stacked modals in vue.

<template>
  <div class="container mt-5">
        <div>
          <b-button v-b-modal.modal-multi-1>Open First Modal</b-button>

          <b-modal id="modal-multi-1" size="lg" title="First Modal" ok-only no-stacking>
            <p class="my-2">First Modal</p>
            <b-button v-b-modal.modal-multi-2>Open Second Modal</b-button>
          </b-modal>

          <b-modal id="modal-multi-2" title="Second Modal" ok-only>
            <p class="my-2">Second Modal</p>
            <b-button v-b-modal.modal-multi-3 size="sm">Open Third Modal</b-button>
          </b-modal>

          <b-modal id="modal-multi-3" size="sm" title="Third Modal" ok-only>
            <p class="my-1">Third Modal</p>
          </b-modal>
        </div>
  </div>
</template>

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

Run Vue Application

Take a further step, use the suggested command to start the vue app, thereafter move to the browser and evoke the given url.

npm run serve
http://localhost:8080

vue bootstrap modal example

Conclusion

After completing this tutorial, you’ll have the courage to create a reusable Modal component in Vue using the Bootstrap Vue package. It is a handy library that serves Bootstrap JavaScript-based components that helps you build responsive, mobile-first, and ARIA accessible projects. Not just modal, but it offers tons of other UI models that create eloquent layouts within seconds.