In this article I'll show you how to integrate the latest version of Bootstrap with your Vue application.
You can use Bootstrap 4 to add mobile first styling to your Vue application without re-inventing the wheel and without having to acquire deep CSS knowledge particularly if you need to create complex and responsive layouts.
Bootstrap 4 requires jQuery and Popper.js. jQuery is a DOM library that makes a direct manipulation of the DOM unlike Vue which uses the virtual DOM approach so you'll want to avoid using jQuery within your Vue application but this means you won't be able to use many Bootstrap 4 components that requires jQuery?
Don't worry though the community has provided some packages that integrate Bootstrap 4 with Vue without resorting to jQuery. Let's see the most popular libraries
So let's get started with the first library that you can use to integrate your Vue application with Bootstrap 4
Head over to your terminal and navigate inside your Vue project then run the following command to intall
npm install bootstrap-vue bootstrap --save
bootstrap-vue requires Bootstrap CSS files so you need to install
Next you'll need to enable the VueBootstrap plugin in your Vue app entry point.
import Vue from 'vue'
import BootstrapVue from "bootstrap-vue"
import App from './App.vue'
render: h => h(App)
For example this how you generate a new Vue project based
bootstrap-vue/webpack-simple using the Vue CLI.
vue init bootstrap-vue/webpack-simple my-project
You can then use different Bootstrap 4 components
<b-button>This is a button</b-button>
<b-button href="#">This is a link</b-button>
Using Bootstrap-Vue is the recommended way to integrate Bootstrap 4 with your Vue 2 application since it offers Vue components for Bootsrap components that requires jQuery.