Bootstrap 5 Dropdown menu broken when using Modal with Nuxt - vue.js

Question

Using Nuxt (vueJs) and Bootstrap 5, I have a dropdown menu in a NavBar :
<nav class="navbar navbar-expand-lg navbar-dark bg-primary pb-xl-5 pt-xl-5">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-xl-5">
<li class="nav-item dropdown me-2 ms-2">
<a
class="nav-link dropdown-toggle text-uppercase text-white"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>Select language</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item text-uppercase" href="#">EN</a></li>
<li><a class="dropdown-item text-uppercase" href="#">ES</a></li>
<li><a class="dropdown-item text-uppercase" href="#">FR</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Everything works fine until I try to use Bootstrap's Modal programmatically :
<script>
import { Modal as bModal } from 'bootstrap';
export default {
...
mounted() {
this.modal = new bModal(document.getElementById('modal-name'));
}
...
};
</script>
The modal works fine but the dropdown menu is broken. As soon as I remove the use of the modal it works again.
I'm not sure how I should be using bootstrapjs :(
Here is the config of bootstrap in nuxt :
import { defineNuxtConfig } from '#nuxt/bridge'
export default defineNuxtConfig({
...
modules: [
'#nuxtjs/axios',
'#nuxtjs/auth-next',
'#nuxtjs/i18n',
'#nuxtjs/style-resources',
'#nuxtjs/fontawesome'
],
fontawesome: {
proIcons: {
light: true
}
},
buildModules: [
'#nuxtjs/fontawesome',
],
styleResources: {
scss: [
'#/assets/scss/_variables.scss',
'#/assets/scss/_utilities.scss'
]
},
plugins: [
{src:'~/static/js/bootstrap.bundle.min.js', mode:'client'}
],
...
});

Answer 1

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);
});
}