'Bootstrap 5 Dropdown menu broken when using Modal with Nuxt
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'}
],
...
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
