Using Bootstrap 5 with Vue 3


I want to use Bootstrap 5 with Vue 3. As Bootstrap 5 uses vanilla JS (no JQuery), can I use Bootstrap 5 directly in a Vue 3 project (without using Bootstrap-Vue)? Can someone guide me how to use Bootstrap 5 with Vue 3?


Bootstrap 5 no longer needs jQuery so it’s easier to use with Vue, and no longer requires a library like bootstrap-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 --save bootstrap
npm install --save @popperjs/core

Next, add the Bootstrap CSS and JS components to the Vue project entrypoint (ie: src/main.js)…

import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"

Then, the simplest way to use Bootstrap components is via the data-bs- attributes. For example here’s the Bootstrap Collapse component…

  class="btn btn-primary" 
  Bootstrap collapse
<div class="collapse py-2" id="collapseTarget">
  This is the toggle-able content!

Demo with Navbar component

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)

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

Demo |
Read more


Leave a Reply

Your email address will not be published. Required fields are marked *