Using Bootstrap 5 with Vue.js

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.

–

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…

        
            Bootstrap collapse
        
        

            This is the toggle-able content!
        

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: `
        
    `,
    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)
    },
})

   
        
           Hover for popover
        
   

Bootstrap 5 + Vue Demo

–

Here’s another example componentizing the Collapse JS plugin:

const collapse = Vue.component('bsCollapse', {
    template: `
        

            
            
        
    `,
    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 })
    },
})


       
            Bootstrap collapse
       
       
Toggle the display of this collapsible content!

from Tumblr https://generouspiratequeen.tumblr.com/post/641089051037958144