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:
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
andwebpack
, - 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.
Top comments (0)