Vue 3 Bootstrap 5 Navbar not toggling back to minimized

user_9733546 0
Viewed 1444

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 class="navbar navbar-dark bg-dark navbar-expand-lg">
    <div class="container container-fluid">
        <a class="navbar-brand" href="/">Title</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navContent" aria-controls="navContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navContent">
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/products">Products</a>
                </li>
                <li v-if="isAuth" class="nav-item float-end ms-md-auto">
                    <a class="nav-link active" 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.

bootstrap-5 vuejs3 vue.js
2 Answers

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.

user_97335460

I also got facing the same problems. please run your project editing code with double quotes to single quotes.

Your code: import "bootstrap/dist/css/bootstrap.min.css"

import "bootstrap" import "bootstrap/dist/js/bootstrap.js"

my testing code:

import 'bootstrap/dist/css/bootstrap.min.css'

import 'bootstrap/dist/js/bootstrap.js'

import "bootstrap" **** Remove this line and run the server again and check

user_164074530
Related