How to fix the Bootstrap 5 dropdown menu not working in Vue3 ?

Fix the Bootstrap 5 dropdown menu not working on click.

Hello there! Welcome to this article where I’ll show you how you can fix the issue that sometimes appears when using Vue and Bootstrap.

1- Import the rigth files :

Firstly, you have to import Bootstrap files in the main.js (or main.ts in case you’re using Typescript in your project). The import has to be done like this :

/*--------------------------- Bootstrap ---------------------------*/
import 'bootstrap/dist/js/bootstrap';
import 'bootstrap/dist/css/bootstrap.css'
// import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Instead of using bootstrap.bundle.min.js, use bootstrap.css like above.

2- Use the dropdown like inside the documentation :

Then, you can now use your dropdown component like in the bootstrap documentation. For example, you have :

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle"
          type="button"
          data-bs-toggle="dropdown"
          aria-expanded="false"
  >
    Dropdown button
  </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>
  </ul>
</div>

That’s how you can fix this issue.

Thanks for reading!