How to use BootstrapVue modals

If you are brand new to Vue, it would be useful to go through our Build your first Vue 2 app today tutorial first, in which we have set up Vue and VueBootstrap locally so that everything is ready for development.

Here’s an overview of this tutorial’s sections:

1. Build and serve a brand new Vue app locally
2. Remove redundant code
3. Add BootstrapVue to the app
4. Import and use BButton and BModal components in HelloWorld.vue

1. Build and serve a brand new Vue app locally

We’ll begin this tutorial by starting a brand new Vue app using the Vue CLI:

cd ~/Desktop;
vue create -d b-v-modal;
cd b-v-modal;
npm run serve -- --port 4567;

That’s it, we should see the familiar starter app when we open our browser at localhost:4567.

2. Remove redundant code

In this section, we’ll get rid of all the code that we don’t need. Rather than showing what we’ll remove, step by step, let’s simply inspect the affected files, after the change. That means that you can simply copy-paste the entire contents of each of these files, if you’re following each step on your machine.

We’ll begin with the HelloWorld.vue file, inside the src/components folder.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

We’ve removed most of the HTML from the template tag, and we’ve completely deleted the styles, together with the style tag.

Next, we’ll update the src/App.vue file, like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div id="app">
    <HelloWorld msg="A BootstrapVue modal example"/>
  </div>
</template>

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

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

In the above file, we’ve deleted the starter image (Vue logo), we’ve changed the value in the msg attribute to “A BootstrapVue modal example”, and we’ve completely removed the component’s styles.

This should leave us with only an unstyled h1 heading on our app’s browser tab:

A BootstrapVue modal example

As a side note, the msg attribute is a nice example of how Vue passes data from a parent to a child component, using props; msg is a prop, and we pass to our HelloWorld.vue component values we want by simply specifying them as specific values of the msg prop.

3. Add BootstrapVue to the app

We’ll add BootstrapVue with npm:

npm install bootstrap-vue bootstrap

After this is done, in src/main.js, we’ll add the newly-added node module, on line 3:

import BootstrapVue from "bootstrap-vue";

Additionally, we’ll import the styles here, so that they’re globally available:

import "bootstrap/dist/css/bootstrap.css"
import "bootsrtap-vue/dist/bootstrap-vue.css"

Here’s the entire src/main.js file after these updates:

1
2
3
4
5
6
7
8
9
10
11
12
import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from "bootstrap-vue"

import "bootstrap/dist/css/bootstrap.css"
import "bootsrtap-vue/dist/bootstrap-vue.css"

Vue.config.productionTip = false

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

However, we’re still not done. Currently, if we looked at our browser, we’d see this error:

Failed to compile.

./src/main.js
Module Error (from ./node_modules/eslint-loader/index.js):

/home/awv/Desktop/b-v-modal/src/main.js
  3:8  error  'BootstrapVue' is defined but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

This means we have to “use” our BootstrapVue library. In practice, that means that we need to add one more line to main.js:

Vue.use(BootstrapVue)

Now our entire src/main.js file looks as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from "bootstrap-vue"

import "bootstrap/dist/css/bootstrap.css"
import "bootstrap-vue/dist/bootstrap-vue.css"

Vue.config.productionTip = false

Vue.use(BootstrapVue)

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

After we’ve saved all the updates, we’ll notice that our msg prop’s value is still the only thing displayed on the screen, but this time the font is updated to Bootstrap’s default, sans-serif font. That means we’ve successfully added the BootstrapVue library.

4. Import and use BButton and BModal components in HelloWorld.vue

In order to use any component from BootstrapVue, we need to import them.

We need to have a button that will open a modal on click, so we’ll add two components: BButton and BModal, in HelloWorld.vue:

<script>
import { BButton, BModal } from "bootstrap-vue";

// ... the rest of code...
</script>

Additionally, we’ll need to copy-paste the first modal example from the BootstrapVue documentation; namely, we’ll insert the following snippet into the template:

<b-button v-b-modal.modal-1>Launch demo modal</b-button>

<b-modal id="modal-1" title="BootstrapVue">
    <p class="my-4">Hello from modal!</p>
</b-modal>

After all the changes, our HelloWorld.vue file now looks like this:

Conclusion

In this tutorial, we’ve learned how to add a BootstrapVue modal to a brand new Vue app. This mostly involves knowing how to integrate BootstrapVue. There’s almost no coding involved, besides the integration of the BootstrapVue library!

We’ve gone through the practical steps in this tutorial; in conclusion, we’ll generalize them as a simple recipe:

1. Build and serve a brand new Vue app locally
2. Remove redundant code
3. Add BootstrapVue and Bootstrap as a node module (using npm)
4. Import the BootstrapVue module in src/main.js
5. Add the Vue.use(BootstrapVue) line in src/main.js to avoid the 'BootstrapVue' is defined but never used error
6. Back in child component, import { BButton, BModal } in the script tag
7. In the child component’s template tag, copy-paste the code for BootstrapVue modal from BootstrapVue docs

Since we will be adding more tutorials on how to add each of the BootstrapVue components, in time, this generalized recipe will become a go-to guide on adding any BootstrapVue component to a Vue app.