Recently, a new package was released in the Vue.js ecosystem. It is an integration of the popular Bootstrap framework and Vue.js. This package is known as BootstrapVue. It allows us to use custom components that integrate with Bootstrap (v4) on the fly.
What’s more? It supports the custom Bootstrap components, the grid system, and also supports Vue.js directives.
In this post, we’ll walk through the basics of BootstrapVue, explain the general concepts, demonstrate the setup process and build out a mini Vue.js project in the process to give you more practical experience.
With BootstrapVue, any developer can make that switch from Vanilla.js or jQuery to Vue.js without bothering about Bootstrap’s heavy dependency on jQuery or even finding a way around it. That’s how BootstrapVue comes to the rescue. It helps to bridge that gap and allows incoming Vue developers to use Bootstrap in their projects with ease.
When using module bundlers like webpack, babel, etc, It is preferable to include the package into your project directly. For demonstration purposes and to give you a hands-on approach to understanding and using BootstrapVue, we’ll set up a Vue.js project with BootstrapVue and build it up to a functional Vue.js application that fetches meals from an external API.
- Basic knowledge of Vue.js will be helpful to understand this demonstration
- Globally install the Vue CLI tool on your laptop to follow up with this post. If you currently don’t have it installed, follow this installation guide
Create a Vue project
First, we have to create a Vue.js project that we can use to demonstrate the implementation of the BootstrapVue component. First, open a terminal window on your preferred directory and run the command below:
vue create bootstrapvue-demo
If you don’t have Vue CLI installed globally, please follow this guide to do so and come back to continue with this tutorial afterwards.
The above command will throw a preset selection dialogue like this:
Select the default preset and click Enter to proceed:
Now, you’re done bootstrapping your Vue application, change into the new Vue project directory and start the development server with the commands below:
npm run serve
This will serve your Vue application on localhost:8080. Navigate to it on your browser and you will see your Vue application live:
How to add Bootstrap and BootstrapVue to the project
There are two major ways to do this, using package managers like and npm and yarn or using the CDN links.
Using npm or yarn
We’ll install all the necessary packages we mentioned earlier for the project using npm or yarn. To do that, navigate to the project’s root directory and run either of the commands below, depending on your preferred package manager:
# With npm
npm install bootstrap-vue bootstrap axios
# With yarn
yarn add bootstrap-vue bootstrap axios
The above command will install the BootstrapVue and Bootstrap packages. The BoostrapVue package contains all of the BootstrapVue components and the regular Bootstrap contains the CSS file. We’ve also installed Axios to help with fetching meals for our app from themealdb API.
We’ve seen the package manager way of installing BootstrapVue into our Vue project, now let’s take a look at a different approach that may require less effort. To add Bootstrap and BootstrapVue to your Vue project via CDN, open the index.html file in the projects public folder and add this code in the appropriate places:
This will pull in the minified, and the latest version of each library into our project, nice and easy! However, for the purpose of this project, we’ll stick to the first option of using the package manager. So, let’s proceed with setting up the BootstrapVue package.
Setting up BootstrapVue
Next, let’s set up the BootstrapVue package we just installed. Head on over to your main.js file and add this line of code to the top:
import BootstrapVue from 'bootstrap-vue'
What we did here is pretty straightforward, we imported the BoostrapVue package and then registered it in the application using the
Vue.use() function so that our Vue application can recognize it.
For everything to work, we also need to import the Bootstrap CSS file into our project. Add this snippet into the main.js file:
Your main.js file should look similar to the snippet below after importing the necessary modules into your Vue app:
Creating Bootstrap components
We are now at the stage where we can start exploring the BoostrapVue component. Let’s get started by creating our first component. The first component we’ll create will be the Navbar component. Go to your components directory, create a file with the name
Navbar.vueand update it with the code below:
The Navbar components contain several BootstrapVue components, one of which is the
b-navbarcomponent. This component is the mother component of every other component in the Navbar. Without this component, all other components in the Navbar won’t render properly.
The text color on the Navbar can be changed with the
background-colorof the Navbar can also be changed with the
variantprops. These colors could be any of the normal Bootstrap default colors —
Another component is the
b-navbar-brand component. This is where the logo of the website can be rendered. It also takes in the
typeprops which can be used to change the
Other BootstrapVue components are:
- b-nav-item (which could be disabled with the “disabled” attribute)
- And so much more
One beautiful thing about BootstrapVue components is that they are responsive by default. As a result, you will not need to write any additional code or use external libraries to make them responsive.
Another component I’d like us to look at is the
Cardcomponent. The card component allows us to display images, text, and so on, in a card. It is written as
b-card. To demonstrate it, let’s create a
Cards.vuefile in our components directory. Then update it with the code below:
To render the Cards component we just created, let’s modify the
HelloWorld.vuefile. Open it up and update it with the code below:
What we’ve done here is create a Cards component and nest it into the
HelloWorld.vuefile. Notice that in the Cards component, we have a lifecycle hook that modifies our data. As a result, the data gets populated into the
b-cardcomponent before being rendered to the browser.
Next, let’s update our
App.vuefile to capture our recent changes and render the right component to the browser. Open it up and update it with the snippet below:
At this point, if you check back on the browser, you should see our meal store app running like this:
As you can see, our card isn’t properly laid out and we’ll have to correct that. Luckily, BootstrapVue has some in-built components we could use to put our cards in a grid.
- b-row, and
Let’s modify the code in our
Cards.vuefile to render the content in a grid with the BootstrapVue components we mentioned above. Open up the
Cards.vue file and update it with the snippet below:
Now if we check back on the browser, we should see a properly laid out card with rendered contents in a grid.
Now we have a neatly rendered responsive meals application. We built all of this with just a handful of BootstrapVue’s components. To learn more about BootstrapVue and all of the things you can do with it, consider checking out the official documentation.
What if you would like to migrate an existing project from regular Bootstrap4 to BootstrapVue? How simple would it be? It’ll be a breeze. Here’s all you need to do:
- Remove the
bootstrap.jsfile from build scripts
jQueryfrom your application, BootstrapVue works independently
- Convert your markup from native Bootstrap to BootstrapVue custom component markup
And that’s it! In three clear steps, you can migrate your existing projects from regular jQuery dependent Bootstrap to the simpler independent BootstrapVue package without breaking any existing code.
In this post, we have demonstrated by way of examples how to get started with BootstrapVue. We went from the installation steps to setting it up in a Vue project, and finally using its custom components to build out parts of our Mealzers application. As we can see, the BootstrapVue module is simple and easy to use. If you have a working knowledge of the regular Bootstrap package, getting started with BootstrapVue will be a breeze.
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.