Easy Method to Add Bootstrap to Vue 2 Project

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

This quick tutorial reveals the most straightforward method to add Bootstrap 5 to the Vue.js application using the BootstrapVue package.

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
– wikipedia

BootstrapVue is a robust library for building responsive, mobile-first applications for the Vue platform; Bootstrap v4 backs it.

The wide array of flexible UI components, including more than 40 plugins, directives, and 1100+ icons, makes BootstrapVue best in class. It even supports automated WAI-ARIA accessibility markup.

There is a simple method to integrate Bootstrap in Vue js directly; however, the straightforward technique is to call the Bootstrap in the Vue app directly.

But, Bootstrap depends on jQuery, which creates a little hindrance to using the JavaScript-based components of Bootstrap. But, we have a compendium of third party packages such as VueStrap and BootstrapVue which can be utilized without using the jQuery.

Theoretically, we are profoundly shed light on BootstrapVue package.

Create Vue Project

Installing Vue CLI makes your ways facile; go to the command prompt or terminal and execute the following command:

npm install -g @vue/cli

Invoking the installation of a brand new vue application is easy through the Vue CLI paradigm.

vue create vue-bootstrap-example

Head over to the project root:

cd vue-bootstrap-example

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"
},

Here is the first look of Vue application shining over the browser

Install Bootstrap-Vue Package in Vue

Execute a command from the command prompt to install the BootstrapVue plugin.

 npm i bootstrap-vue

Import BootstrapVue in Main Js

To unleash the power of Bootstrap in Vue, we have to register the BootstrapVue package in the main.js file.

import Vue from 'vue'
import App from './App.vue'

import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'

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

Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

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

Now, we are all set to develop mobile-first UI components in Vue.js application.

Creating Bootstrap UI Components with BootstrapVue

We will start with creating a Form UI component using Bootstrap-Vue; go to src/App.vue file and place the following code.

<template>
  <div class="container mt-5">
    <b-form @submit="onSubmit" @reset="onReset" v-if="show">
      <b-form-group
        id="input-group-1"
        label="Email address:"
        label-for="input-1"
        description="We'll never share your email with anyone else."
      >
        <b-form-input
          id="input-1"
          v-model="form.email"
          type="email"
          required
          placeholder="Enter email"
        ></b-form-input>
      </b-form-group>

      <b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
        <b-form-input
          id="input-2"
          v-model="form.name"
          required
          placeholder="Enter name"
        ></b-form-input>
      </b-form-group>

      <b-form-group id="input-group-3" label="Food:" label-for="input-3">
        <b-form-select
          id="input-3"
          v-model="form.food"
          :options="foods"
          required
        ></b-form-select>
      </b-form-group>

      <b-form-group id="input-group-4">
        <b-form-checkbox-group v-model="form.checked" id="checkboxes-4">
          <b-form-checkbox value="me">Check me out</b-form-checkbox>
          <b-form-checkbox value="that">Check that out</b-form-checkbox>
        </b-form-checkbox-group>
      </b-form-group>

      <b-button type="submit" variant="primary" class="btn-block">Submit</b-button>
    </b-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          email: '',
          name: '',
          food: null,
          checked: []
        },
        foods: [{ text: 'Select One', value: null }, 'Carrots', 'Beans', 'Tomatoes', 'Corn'],
        show: true
      }
    },
    methods: {
      onSubmit(evt) {
        evt.preventDefault()
        alert(JSON.stringify(this.form))
      },
      onReset(evt) {
        evt.preventDefault()
        // Reset our form values
        this.form.email = ''
        this.form.name = ''
        this.form.food = null
        this.form.checked = []
        // Trick to reset/clear native browser form validation state
        this.show = false
        this.$nextTick(() => {
          this.show = true
        })
      }
    }
  }
</script>

Start the Vue application

npm run serve

App can be checked on either of the URL:

Local:   http://localhost:8080/ 
Network: http://192.168.0.100:8080/

Here is the result of the entire tutorial:

Summary

We have integrated a Form component using Bootstrap UI directives through the BootstrapVue plugin. You can check the official documentation to craft the more such components like this.