Vue 2 Tutorial- How To Add And Use Bootstrap Modal In Vue 2 App

Vue Js Bootstrap Modal Tutorial; In this Vue example, we will learn how to add the bootstrap CSS framework in the Vue Js app, and how to integrate bootstrap modal in Vue using the sublime bootstrap and bootstrap-vue packages.

 

In addition, we will be learning how to set up Vue environment and how to add essential dependencies.

Also, we will get to know how to add a simple modal in Vue and vertically center the bootstrap modal in Vue app.

 

How To Create Modal Component In Vue Using Bootstrap

Step 1- Set Up 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 App

 

Let’s learn in detail now:

Step 1- Set Up Vue Environment

The very basic step for starting with the implementation is just to install Vue CLI using the below command:

npm install -g @vue/cli

 

Step 2- Create Vue Js Project

The next step is just to install the new Vue app and get into the project folder:

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

 

 

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 the above error for invoking the app, do remember to update the “scripts”: [] array in the 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"
},

 

Step 3- Add Bootstrap Vue Package

Further, we have to install the bootstrap and the bootstrap-vue packages:

So, we open the terminal and install these packages with the help of the following commands:

# With npm
npm install vue bootstrap bootstrap-vue
# With yarn
yarn add vue bootstrap bootstrap-vue

Step 4- Register Bootstrap In Vue

Afterward, we need to register these packages by updating the src/main.js file. So, we need to import BootstrapVue and IconsPlugin which have to be injected 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')

Step 5- Add Simple Bootstrap Modal In Vue

For implementing a simple bootstrap modal in Vue, we have to add the b-modal attribute with the button. Then, we need to 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>

Step 6- Vertically Centered Modal

We can vertically center our 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>

Step 7- Multiple Modals min Vue

We can also open multiple modals from one modal. Here, following 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>

 

Step 8- Run Vue Application

We have to use this npm command in order to start the Vue app:

npm run serve

 

Conclusion

So, friends, we have reached the end of this Vue example. Now, we can create a reusable Modal component in Vue using the Bootstrap Vue package.

Hope that you have well understood how to add and use the bootstrap modal in a Vue Js app.

 

Thanks

 

Leave a Reply

Your email address will not be published. Required fields are marked *