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"
  },

...

Bit confusing - are you using bootstrap-vue or just bootstrap, based on your dependencies, I assume just bootstrap? — Steven B.
– Steven B., Commented Apr 30, 2024 at 19:48
@StevenB., I installed bootstrap-vue. (I assumed that's what I needed.) — PKonstant
– PKonstant, Commented May 1, 2024 at 14:10

kissu · Accepted Answer · 2024-04-30 20:05:20Z

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.

answered Apr 30, 2024 at 20:05

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

PKonstant Over a year ago

if I understand you right, Bootstrap was great for its time, but are there better and more viable options today?

kissu Over a year ago

@PKonstant exactly. Bootstrap is like jQuery. Amazing when it came because it had unique offerings. Nowadays those are quite obsolete and better solutions exist.

PKonstant Over a year ago

I checked out the website you referenced, and what a great starting point. I picked out three: Quasar, Tailwind and PrimeVue. I ended up picking PrimeVue. Thank you again for your help and pointing me in the right direction.

kissu Over a year ago

@PKonstant this is indeed a great choice! You're welcome and enjoy.

kheya Jan 13 at 18:53

In what way, Tailwind is a better choice than Bootstrap? Bootstrap JS interference or something else like all bootstrap sites look similar? Tailwind generates bloated html and can be harder to manage. If many people start using Tailwind, they will look similar or different? If they are supposed to look similar, then you have same problem that you are trying to avoid.

|

Collectives™ on Stack Overflow

How to use Bootstrap 5 with VueJS 3

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related