[Vuejs]-Bootstrap 5 Dropdown menu broken when using Modal with Nuxt

by

0👍

for a dropdown menu, you need to import Dropdown as well as for a modal window
main.js

import { Modal, Dropdown } from "bootstrap"; 
window.Modal = Modal;
window.Dropdown = Dropdown;

modal.vue

mounted() {
    modal = new Modal(document.getElementById("modal"));
    modal.show();
}

menu.vue

mounted() {
      let dropdownElementList = [].slice.call(
        document.querySelectorAll(".dropdown-toggle")
      );
      let dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
        dropDown = new Dropdown(dropdownToggleEl);
      });
  }

Leave a comment