Add Bootstrap 4 with Vue CLI 3/4

In this tutorial, we’ll see by example how to integrate Bootstrap 4 with Vue.js using Bootstrap-Vue and Vue CLI.

We'll particularly see how to use the Bootstrap Vue CLI plugin via the vue add @techiediaries/bootstrap command to quickly install Bootstrap in your Vue project without much hassle.

Bootstrap is a popular HTML/CSS framework for building responsive websites. However, for most components that need JavaScript, jQuery is required. Let's see how to use Bootstrap 4 with Vue.js using Bootstrap-Vue that provides an implementation without depending a jQuery.

Using Bootstrap with Vue.js

Since Bootstrap depends on jQuery, using it with Vue.js is somehow tricky. So the community has created some implementations that remove the jQuery requirement:

• Bootstrap-Vue
• VueStrap

In this tutorial, we'll see how to use Bootstrap-Vue.

How to Use Bootstrap-Vue

You can use Bootstrap-Vue in various ways such as:

• Installing it from npm using the npm i bootstrap-vue command,
• Using vue-cli templates to scaffold preconfigured projects such as webpack simple and webpack,
• Using the Bootstrap Vue CLI plugin via the vue add @techiediaries/bootstrap command

Let's see how you can quickly add Bootstrap 4 to your Vue.js project using vue add @techiediaries/bootstrap from this article.