'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