Using Bootstrap 5 with Vue 3

vuejs3 bootstrap-5

Aditya Sharma · Jan 3, 2021 · Viewed 7.1k times · Source

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?

Answer

Yes, you can use Bootstrap without Bootstrap-Vue. Install these two packages with npm:

npm install --save @popperjs/core bootstrap@next

Import Bootstrap to src/main.js:

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

Example usage for Vue Template:

<div class="dropdown">
    <button
      class="btn btn-secondary dropdown-toggle"
      type="button"
      id="dropdownMenuButton1"
      data-bs-toggle="dropdown"
      aria-expanded="false"
    >
      Check Bootstrap
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <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>
    </ul>
  </div>

Result:

Using Bootstrap 5 with Vue 3

Answer

Related questions