DEV Community

loading...
Cover image for Using Bootstrap 5 with Vue.js
Codeply

Using Bootstrap 5 with Vue.js

Carol Skelly
Top girl dev on StackOverflow. Creator of Codeply.com. Love frontend, but full-stack too! #vue #vuetify #bootstrap #css #javascript #react #net
Updated on ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Discussion (5)

Collapse
bc profile image
Brian Canzanella

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

Collapse
perrycodes profile image
PerryCodes • Edited

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?

Collapse
namstel profile image
Namstel • Edited

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.

Collapse
themesguide profile image
ThemesGuide

Cool, thanks for the tip!

Some comments have been hidden by the post's author - find out more