How to Add and Use Bootstrap Modal in Vue 2 App

Last Updated on March 4, 2024 by Digamber in Vue JS

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 2 Project

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

vue create vue-supernova-app

cd vue-supernova-app

Node.js Gatsby error – “digital envelope routines::unsupported …”

Error: digital envelope routines::unsupported

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

To remove above error for invoking the app, make sure to update the "scripts": [] array in package.json file.

"scripts": {
    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},

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.