phplaravelvue.jsbootstrap-5

Why just dropdown not working on boostrap when i include vite vue js in laravel

I'm using Laravel with Vue and Bootstrap 5, everything is fine just the Dropdown from NavBar menu doesn't work when I include @vite in head:

@vite(['resources/css/app.css', 'resources/js/app.js'])

I don't know how to fix this.

<div class="input-group">
  <button class="btn btn-rounded dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Projects <i class="mdi mdi-chevron-down ms-2"></i></button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Jobs</a></li>
    <li><a class="dropdown-item" href="#">Users</a></li>
    <li><a class="dropdown-item" href="#">Projects</a></li>
  </ul>
  <input type="text" class="form-control bg-transparent" placeholder="Search.." aria-label="Text input with dropdown button">
  <span class="mdi mdi-magnify"></span>
</div>
Solution

  • I finally solved this problem. Make sure Bootstrap is imported just once in app.js.

    You can import the full Bootstrap library:

    import * as bootstrap from 'bootstrap'
window.bootstrap = bootstrap

    Or, import individual components like Toast:

    import {Toast} from 'bootstrap'
window.bootstrap = {Toast}