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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s