Vue Projesine Bootstrap 5 eklemek(Include Bootstrap 5 to Vue Project)

Merhabalar,

Bootstrap 5’i Vue projesine dahil etmek için herhangi bir çözüm göremeyince kendi bulduğum çözümü paylaşmak istedim.

(örnekte Vue 2 kullandım)

Kurulum (Installing)

npm install bootstrap@next

npm install --save @popperjs/core

Yüklemeler tamamlandıktan sonra src/main.js dosyasına:

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

Bu iki dosyayı import ediyoruz.

Örnek bir template (example):

<div>
   <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>
</div>