Getting started with BootstrapVue

Vue.js is a popular JavaScript library used for developing prototypes in a short time. This includes user interfaces, front-end applications, static webpages, and native mobile apps. It is known for its easy to use syntax and simple data binding features.

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.

Why BootstrapVue?

Given that Bootstrap is the most popular CSS framework available (In my opinion), most developers who have moved or who are intending to move from frameworks like Vanilla JavaScript to Vue.js always find the migration a bit difficult because of Bootstrap’s heavy dependency on jQuery.

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.

Getting started

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.

Prerequisites

• 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:

cd bootstrapvue-demo

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

OR

# 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.

Using CDN

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:

<!-- public/index.html-->

<!-- Add Bootstrap and Bootstrap-Vue CSS to the <head> section -->
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/>

<!-- Add Vue and BootstrapVue scripts just before the closing </body> tag -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

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:

//src/main.js

import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

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:

//src/main.js

import 'bootstrap/dist/css/bootstrap.css'

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

Your main.js file should look similar to the snippet below after importing the necessary modules into your Vue app:

//src/main.js
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.use(BootstrapVue)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#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.vue and update it with the code below:

//src/components/Navbar.vue
<template>
    <div>
      <b-navbar toggleable="lg" type="dark" variant="success">
        <b-container>
            <b-navbar-brand href="#">Mealzers</b-navbar-brand>
            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
            <b-collapse id="nav-collapse" is-nav>
              <!-- Right aligned nav items -->
              <b-navbar-nav class="ml-auto">
                <b-nav-form>
                  <b-form-input 
                    size="sm" 
                    class="mr-sm-2" 
                    placeholder="Search for a meal"
                    v-model="meal"
                    ></b-form-input>
                  <b-button 
                    size="sm" 
                    class="my-2 my-sm-0" 
                    type="submit" 
                    @click.prevent="getMeal"
                    >Search</b-button>
                </b-nav-form>
                <b-nav-item-dropdown right>
                  <!-- Using 'button-content' slot -->
                  <template slot="button-content"><em>User</em></template>
                  <b-dropdown-item href="#">Profile</b-dropdown-item>
                  <b-dropdown-item href="#">Sign Out</b-dropdown-item>
                </b-nav-item-dropdown>
              </b-navbar-nav>
            </b-collapse>
          </b-container>
      </b-navbar>
    </div>  
</template>
<script>
export default {
    data() {
        return {
            meal: ''
        }
    },
  methods: {
    getMeal() {
      ...
    }
  }
}    
</script>

The Navbar components contain several BootstrapVue components, one of which is the b-navbar component. 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 type props. The background-color of the Navbar can also be changed with the variant props. These colors could be any of the normal Bootstrap default colors — info, primary, success etc.

Another component is the b-navbar-brand component. This is where the logo of the website can be rendered. It also takes in the variant and type props which can be used to change the background-color and text-color respectively.

Other BootstrapVue components are:

• b-nav-form
• b-nav-item-dropdown
• b-dropdown-item
• b-navbar-toggle
• b-collapse
• b-nav-item (which could be disabled with the “disabled” attribute)
• b-navbar-nav
• b-nav-item.
• 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 Card component. 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.vue file in our components directory. Then update it with the code below:

To render the Cards component we just created, let’s modify the HelloWorld.vue file. Open it up and update it with the code below:

//src/components/HelloWorld.vue
<template>
  <div>
    <Cards />
  </div>
</template>

<script>
import Cards from './Cards.vue'
export default {
  name:'cards',
  components: {
    Cards
  },
  data() {
    return {

    };
  },
};
</script>
<style scoped>
</style>

What we’ve done here is create a Cards component and nest it into the HelloWorld.vue file. 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-card component before being rendered to the browser.

Next, let’s update our App.vue file to capture our recent changes and render the right component to the browser. Open it up and update it with the snippet below:

//App.vue
<template>
  <div id="app">
    <Navbar />
    <HelloWorld/>
  </div>
</template>
<script>
 import HelloWorld from './components/HelloWorld.vue'
  import Navbar from './components/Navbar.vue';  
  export default {
    name: 'navbar',
    components: {
      Navbar,
      HelloWorld
    }
  }
</script>

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.

They are:

• b-row, and
• b-col

Let’s modify the code in our Cards.vue file 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.

Handling migrations

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:

1. Remove the bootstrap.jsfile from build scripts
2. Remove jQueryfrom your application, BootstrapVue works independently
3. 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.

Conclusion

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.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

Try it for free.

The post Getting started with BootstrapVue appeared first on LogRocket Blog.