Vue 2 Tutorial- How To Add Bootstrap To Vue 2 Project In An Easy Way

We will learn an easy method to add bootstrap 4 to a Vue Js application using the BootstrapVue Package.

With BootstrapVue, we can build responsive, mobile-first and ARIA (Accessible Rich Internet Applications) accessible projects on the web using Vue.js and the world’s most popular front-end CSS library.

With more than 85 components, over 45 plugins, several directives, and 1200+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4 component and grid system available for Vue.js v2.6, complete with extensive and automated WAI-ARIA accessibility markup.

 

So, in this Vue js guide, we will be learning how to integrate Bootstrap in Vue js directly. However, the straightforward technique is to call the Bootstrap in the app directly.

 

But. the 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.

 

How To Add Bootstrap To Vue 2 Project

Step 1- Create Vue Project

Step 2- Install Bootstrap-Vue Package In Vue

Step 3- Import BootstrapVue In Main Js

Step 4- Creating Bootstrap 4 UI Components With BootstrapVue

Step 5- Start The Vue Application

 

Step 1- Create Vue Environment

Vue CLI makes the Vue app development very smooth. We simply have to run the following command in order to install it on our device:

npm install -g @vue/cli

 

We will use the below command for invoking the installation of a new app. See below:

vue create vue-bootstrap-example

 

Further, we head over to the project root:

cd vue-bootstrap-example

 

 

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, make sure 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 2- Install Bootstrap-Vue Package In Vue

Further, we need to invoke the following command to begin installing the BootstrapVue plugin:

npm i bootstrap-vue

 

Step 3- Import BootstrapVue In Main Js

In order to unleash the power of Bootstrap 4 in Vue, we need 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 ready to develop mobile-first UI components in Vue.js application.

Step 4- Creating Bootstrap 4 UI Components With BootstrapVue

Here, in this step, we will start with creating a form UI component using Bootstrap-Vue for which we have to go to src/App.vue file and place the below 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>

 

Step 5- Start The Vue Application

We have to execute the following code to run the vue app:

npm run serve

 

Conclusion

So, in this Vue guide, we have learned to integrate a form component using Bootstrap UI through the BootstrapVue plugin. Hope that you find this step-by-step tutorial quite easy to implement in your Vue projects.

 

Thanks