How to Replace jQuery in Bootstrap Projects with Vue.js

Bootstrap is one of the most popular frameworks for responsive web development, but with the rise of Vue.js many developers prefer to control page elements with Vue instead of jQuery, which adds about 30 KB to page size and can complicate bundling.

If you are already using Vue and Bootstrap, you can eliminate jQuery entirely by removing Bootstrap's JavaScript components and using Vue‑based replacements such as vue-strap , which provides Vue plugins for common Bootstrap widgets like tabs, carousels, badges, and modals.

Tabs Component

The following code demonstrates a basic tab layout built with Vue. The active tab is tracked by a data property and the appropriate classes are toggled.

<div id="tabs">
  <ul class="nav nav-tabs">
    <li v-bind:class="{ active: tab === 1 }" v-on:click="tab = 1"><a>Tab 1</a></li>
    <li v-bind:class="{ active: tab === 2 }" v-on:click="tab = 2"><a>Tab 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane" v-bind:class="{ active: tab === 1 }">Pane 1</div>
    <div class="tab-pane" v-bind:class="{ active: tab === 2 }">Pane 2</div>
  </div>
</div>

The Vue instance that powers the tabs:

new Vue({
  el: '#tabs',
  data: {
    // Tab 1 is selected by default
    tab: 1
  }
});

Modal Dialog

Vue can also replace Bootstrap's modal plugin. The modal’s visibility is controlled by a Boolean data property and inline styles are bound via a computed property.

<div id="app" v-bind:class="{ 'modal-open': show }">
  <button class="btn btn-primary" v-on:click="toggle">Open</button>
  <div class="modal" tabindex="-1" v-bind:class="{ in: show }" v-bind:style="modalStyle">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <p>Vue-powered modal!</p>
        </div>
        <div class="modal-footer">
          <button class="btn" v-on:click="toggle">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    show: false
  },
  methods: {
    toggle() { this.show = !this.show; }
  },
  computed: {
    modalStyle() {
      return this.show ? { 'padding-left': '0px', display: 'block' } : {};
    }
  }
});

By packaging the JavaScript into reusable Vue components, you can keep your codebase clean and maintainable. Using v-for to generate tabs and modal content from data arrays further reduces duplication.

Compared with jQuery, Vue offers a more efficient DOM update system, better performance, and components that are easier to extend and maintain. However, Vue does not support IE 8.

With the approaches shown, you can confidently drop jQuery from future Bootstrap projects and leverage Vue’s modern capabilities.