Main menu

Post navigation

Integrating Bootstrap with Vue.js using Bootstrap-Vue

In this article, we’ll explore how to integrate Bootstrap with Vue.js using Bootstrap-Vue.

React and Vue.js are two leading, modern JavaScript frameworks for front-end development. While React has a steep learning curve, a complex build process (if you’re coming from a jQuery world), all you need to do to start using Vue.js is a simple import script:

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>

Bootstrap has become a popular HTML/CSS framework for building mobile responsive websites. However, it relies mostly on jQuery for its core features as well as its extensive list of components — such as alerts, and modals. So we’ll explore how to use Bootstrap with Vue.js, thereby removing the need for jQuery.

Introducing Bootstrap

Originally created in late 2011 by Mark Otto and Jacob Thornton at Twitter Inc., Bootstrap soon found popularity outside Twitter after being open-sourced. It continued to grow as the fastest front-end framework for web developers worldwide.

Today, Bootstrap has become the de-facto standard for starting a new website project, with its CSS and JS architecture providing mobile responsive and common UI components, along with support for most modern browsers.

Connecting Bootstrap with Vue.js

As we mentioned earlier, using with Bootstrap with Vue.js is slightly tricky, because of Bootstrap’s dynamic components’ heavy dependency on jQuery. However, there are at least a couple of good projects (very early builds, so don’t expect everything to be tried and tested) that are in the process of bridging that gap: