Using Bootstrap 5 with Vue.js

It used to be that in order to use Bootstrap with Vue you had to use a 3rd party wrapper library like bootstrap-vue.

BUT, now that Bootstrap 5 no longer requires jQuery, using it in your Vue app is much easier and with no conflicts! 😲 Now that Bootstrap 5 components are written as vanilla JS plugins, you get improved alignment with Vue's best patterns & practices.

This also means it's possible to use Bootstrap 5 components without the need for a 3rd party library like bootstrap-vue.

---

Installing Bootstrap 5 in Vue

Install bootstrap as you would any other JS module in the Vue project using npm install or by adding it to the package.json.

npm install bootstrap

---

Using Bootstrap 5 in Vue

The simplest way to use Bootstrap components in Vue is via the data-bs- attributes. For example here's the Bootstrap Collapse component...

        <button class="btn btn-primary" 
            data-bs-target="#collapseTarget" 
            data-bs-toggle="collapse">
            Bootstrap collapse
        </button>
        <div class="collapse py-2" id="collapseTarget">
            This is the toggle-able content!
        </div>

Or, you can import any Bootstrap components and "wrap" them as Vue components. For example here's the Popover component...

import { Popover } from bootstrap

const popover = Vue.component('bsPopover', {
    template: `
        <slot/>
    `,
    props: {
        content: {
            required: false,
            default: '',
        },
        title: {
            default: 'My Popover',
        },
        trigger: {
            default: 'click',
        },
        delay: {
            default: 0,
        },
        html: {
            default: false,
        },
    },
    mounted() {
        // pass bootstrap popover options from props
        var options = this.$props
        var ele = this.$slots.default[0].elm
        new Popover(ele,options)
    },
})

   <bs-popover
        title="Hello Popover"
        content="This is my content for the popover!"
        trigger="hover">
        <button class="btn btn-danger">
           Hover for popover
        </button>
   </bs-popover>

Bootstrap 5 + Vue Demo

--

Here's another example componentizing the Collapse JS plugin:

const collapse = Vue.component('bsCollapse', {
    template: `
        <div>
            <slot name="trigger"></slot>
            <slot name="target"></slot>
        </div>
    `,
    props: {
        toggle: {
            required: false,
            default: false
        },
        id: {
            required: true
        }
    },
    mounted() {
        var trigger = this.$slots['trigger'][0].elm
        var target = this.$slots['target'][0].elm
        target.classList.add('collapse')
        target.setAttribute('id', this.id);
        trigger.setAttribute('data-bs-target', '#' + this.id);
        trigger.setAttribute('data-bs-toggle','collapse');
        new Collapse(target, {toggle: this.toggle })
    },
})

<bs-collapse id="collapse1">
       <button class="btn btn-info" slot="trigger">
            Bootstrap collapse
       </button>
       <div slot="target">Toggle the display of this collapsible content!</div>
</bs-collapse>

Bootstrap 5 + Vue Demo

Of course using a lib like bootstrap-vue is still somewhat easier since they've already "wrapped" all the Bootstrap components for you. But this technique is helpful if you're only using Bootstrap CSS, and want the functionality of only a few JS components.

Also, here are a few more Vue + Bootstrap 5 component examples for you...

Vue Bootstrap 5 Modal
Vue Bootstrap 5 Dropdown
Vue Bootstrap 5 Tooltip
Vue Bootstrap 5 Offcanvas

Comments

[Brian Canzanella]

I've always wanted to try Vue! Very excited about BS5 too... this is a match made in heaven, thanks for sharing!

[PerryCodes]

I couldn't tell you why... but the animation is jittery in all the "data-bs-" examples, but smooth for the "componetized" versions. Can anyone shed light on the reason? Are you also experiencing this?

[Namstel]

I'm also experiencing this and I found out that it's because of the py-2 class on the #collapseTarget element. Bootstrap 5 doesn't seem to handle that very well...

A better way to add the padding, is by adding a child element to the #collapseTarget element and giving that element the padding.

[ThemesGuide]

Cool, thanks for the tip!

[shawnshaw]

what about vue3? so far the only UI kit that supports vue3 is primevue, the rest(bootstrap-vue, vuetify, etc) are still far from ready.

[Roman Cervantes]

Consider Naive UI as an alternative, it's built for Vue3.

[shawnshaw]

unfortunately naive ui is not responsive,will use primevue.thanks

[Michal Szymanski]

Great article, thanks! Btw the way - there is already very nice and free integration for Bootstrap 5 and Vue 3 :) Have a look at MDB Vue UI KIT mdbootstrap.com/docs/b5/vue/

[Jarmo Annunen]

Here's how it can be done with composition api and "script setup"

gist.github.com/jannunen/33833aaf6...