Vue 3 Bootstrap 5 Navbar not toggling back to minimized-CodePudding

Im using bootstrap 5 on vue 3 like by doing the below

npm install bootstrap

and importing it in main.js like

import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"
import "bootstrap/dist/js/bootstrap.js"

and now in my components I have a nav

<nav >
    <div >
        <a  href="/">Title</a>
        <button  type="button" data-bs-toggle="collapse" data-bs-target="#navContent" aria-controls="navContent" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
        </button>
        <div  id="navContent">
            <ul >
                <li >
                    <a  href="/">Home</a>
                </li>
                <li >
                    <a  href="/products">Products</a>
                </li>
                <li v-if="isAuth" >
                    <a  v-on:click="showLogoutDialog">Logout</a>                     
                </li>
            </ul>
        </div>
    </div>
</nav>

And now the issue is that - I can toggle it to show the menu but cant toggle back. On looking into the inspect tool, I can see that the collapsing class gets applied but immediately disappears.

Thanks for any help in advance and please let me know if anything else is needed.

CodePudding user response：

Eh.. solved it. So the issue is that if bootstrap gets included twice - the classes might not apply properly. So I had to remove the boostrap.js import. Now it works fine.