Using Bootstrap 5 with Vue.js
Tags: javascript, vue, bootstrap
Published: 2021-01-22 13:35:40

---
title: Using Bootstrap 5 with Vue.js
published: true
description: Bootstrap 5 + Vue without a 3rd party library
tags: javascript, vue, bootstrap
cover_image: https://i.imgur.com/Cf0IMlu.png
---

It used to be that in order to [use Bootstrap with Vue](https://www.digitalocean.com/community/tutorials/vuejs-using-bootstrap4) 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 <code>data-bs-</code> 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](https://codeply.com/p/Evy1jdvloZ)

--

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](https://codeply.com/p/Evy1jdvloZ)

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](https://www.codeply.com/p/2sEApooRK2)
[Vue Bootstrap 5 Dropdown](https://codeply.com/p/4kwF3loH21)
[Vue Bootstrap 5 Tooltip](https://codeply.com/p/U7pe8f3mHs)
[Vue Bootstrap 5 Offcanvas](https://codeply.com/p/vHAJkdaTLq)