How to use Bootstrap 5 with VueJS 3

Question

I am currently learning Vue.js and have some experience with Bootstrap. When I saw you can use Bootstrap with Vue.js, I thought I would try it out. My code is rather simple, a dropdown and a popover. The dropdown works but the popover doesn't. I am using Bootstrap 5 and Vue.js 3. I installed popper-js/core as well. Does my main.js file need more imports? BTW, I used vue/cli to create my project.

app.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <h1>Bootstrap</h1>
    <div class="container">
      <div class="btn-group">
        <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Action
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>
      </div>  
      <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">Popover on top</button>
      <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">Popover on right</button>
      <div class="text-center my-3">
        <b-button v-b-popover.hover.top="'I am popover directive content!'" title="Popover Title">Hover Me</b-button>
        <b-button id="popover-target-1">
          Hover Me
        </b-button>
        <b-popover target="popover-target-1" triggers="hover" placement="top">
          <template #title>Popover Title</template>
          I am popover <b>component</b> content!
        </b-popover>
      </div>
    </div>

</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js

import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'

const app = createApp(App);

app.mount('#app');

// Initialize popovers globally
app.directive('popover', {
  mounted(el) {
    new bootstrap. Popover(el)
  }
});

npm list

$ npm list
[email protected] D:\projects\VueWorkspace\build-a-bot
├── @babel/[email protected]
├── @babel/[email protected]
├── @floating-ui/[email protected]
├── @popperjs/[email protected]
├── @vue/[email protected]
├── @vue/[email protected]
├── @vue/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

package.json

...
  "dependencies": {
    "@floating-ui/vue": "^1.0.6",
    "@popperjs/core": "^2.11.8",
    "bootstrap": "^5.3.3",
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },

...

Answer 1

Bootstrap-vue is in v2.23.0 since 2022, aka a now-abandoned project that doesn't support Vue3 fully.

The bootstrap v5 you're talking about is the regular CSS framework here.

Those 2 are not the same. You could implement the CSS framework into VueJS but you gonna indeed have a lot of issues regarding the whole JS interactivity part as you may have noticed.
You will also have a hard time managing any kind of state (like "my modal is open now").
Then, you gonna have a lot of issues regarding performance too, because there is no point loading the whole CSS framework if you don't use every piece of it on all of your pages.

So, if you're gonna be using some CSS framework, use one that is well-supported, active, with plenty of community and support.

So to prevent you from shooting yourself in the foot, here is a good website that references all the good and viable solutions as of today. They all have their own specs and uses but you will have plenty of choice and a far easier time. Their documentation is also quite explicit and easy to use.

On a side note, it's not a bad thing because all the websites that use Bootstrap look the same. That trend in design is long gone.

TLDR: sorry for not giving an answer to your issue really, but thank me later for telling you to not touch Boostrap.