Dropdown menu not working in vue 3 components

[realrecordzLab]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I have this code in my vue 3 app. I'm trying to use doropdown menu in my components but they will not work.
Here is my code

main.js file

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import '@popperjs/core'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle'
import '@fortawesome/fontawesome-free/css/all.min.css'
import 'firebaseui/dist/firebaseui.css'
import { app } from '@/firebase/init'

let vue
app.getCurrentUser().then( (user) => {
    if(!vue ) {
        vue = createApp(App).use(router).mount('#app')
    }
})

Home.vue component code

<template>
	<Navbar v-if="store.currentUser"></Navbar>
    <div class="container p-0">
		<div class="row mt-5 pt-5 m-0" id="feedRow">

			<div class="col-sm-12 col-md-8 col-lg-8 p-md-3 mt-2 mb-2 card shadow mx-auto" v-for="(content, index) in feed" :key="index">
				<div class="card-header mb-2 p-md-0 boredr-0">
					<div class="dropdown" v-if="store.currentUser.uid === content.creator">
						<a class="text-decoration-none text-black" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
							<i class="fa-solid fa-ellipsis"></i>
						</a>
						<ul class="dropdown-menu">
							<li>
								<a class="dropdown-item" href="#">
									Edit
									<i class="fa-solid fa-pen-to-square"></i>
								</a>
							</li>
							<li>
								<a class="dropdown-item" href="#">
									EDelete
									<i class="fa-solid fa-trash-can"></i>
								</a>
							</li>
						</ul>
					</div>
				</div>
				<a class="text-decoration-none text-black" href="#" @click.prevent="showContentModal(content)">
					<img class="img-fluid" :src="content.cover" id="coverImage">
					<hr>
					<h4 class="card-title">{{ content.title }}</h4>
					<p class="lead">{{ content.description }}</p>
				</a>
				<div class="d-inline">

				</div>
			</div>
		</div>
    </div>

	<!-- Modal -->
	<div class="modal fade" ref="contentModal" id="contentModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="staticBackdropLabel">{{ modalTitle }}</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
				</div>
				<div class="modal-body">
					<div class="accordion accordion-flush" id="accordionFlush">
						<div class="accordion-item" v-for="( section, index) in modalContent" :key="index">
							<h2 class="accordion-header" id="flush-header">
							<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" :data-bs-target="`#flush${index}`">
								#{{ index + 1 }} {{ section.sectionTitle }}
							</button>
							</h2>
							<div :id="`flush${index}`" class="accordion-collapse collapse" data-bs-parent="#accordionFlush">
								<div class="accordion-body" v-html="section.sectionBody"></div>
							</div>
						</div>
                	</div>
				</div>
			</div>
		</div>
	</div>
</template>

As you can see I've imported bootstrap globally in my vue app and also I've imported the needed js file and popper js.
How I can fix this? It's a very annoying problem to be not able to use dropdown for some front-end things.

Thank you for the help

Reduced test cases

No link available

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.2

[julien-deramond]

Thanks for reporting this issue @realrecordzLab. Would it be possible to have a running example directly in StackBlitz (or another tool)? It would save us time not having to create a Vue.js environment to test it.

[realrecordzLab]

@julien-deramond here is the StackBlitz link

The strange thing is that on stackbiz the dropdown seems working fine, but this will not occur in my local app where to get the dropdown working I have used the js plugin and some css to fix the positioning that was wrong.

I had the same problem with the accordion that will not be closed after expanded, but I don't know why these problem occur.

[julien-deramond]

Since it doesn't seem to be an issue with Bootstrap directly, I transformed this issue in a discussion to help you fix it.

In your description I can see import 'bootstrap/dist/js/bootstrap.bundle'. It is not rather import 'bootstrap/dist/js/bootstrap.bundle.js' ? (missing .js)

[realrecordzLab]

nope, the file extension that is missing isn't a problem for webpack. There is something more under the hood that needs to be investigated

[TrulyBright]

For those who've got the same issue: if you're using bootstrap-vue-3, try getting rid of it. Remove all the codes related to it from main.js. I've fixed this by doing so.

[realrecordzLab]

never used bootstrap-vue-3 but I suppose that for some js plugins of bs5 there is something broken when they are used with webpack or other bundler. To fix the issue at the moment I've used a bit of css to solve a positioning issue and the toggle method to get the dropdown opened and closed when the related button is clicked

[dedanirungu]

I have the same issue. It was working until I update it.

[Floris123-hub]

Hello !
Here is how I fixed this issue on my side :

In the main.ts or main.js

/*------------------------------------- Bootstrap -------------------------------------*/
import 'bootstrap/dist/js/bootstrap';
import 'bootstrap/dist/css/bootstrap.css'
// import 'bootstrap/dist/js/bootstrap.bundle.min.js';

I commented bootstrap.bundle.min.js import

Then, in the component

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

That's all 😊

[johndivam]

execute the following commands:

npm install bootstrap --save
npm install @popperjs/core
npm install jquery --save

Remember to restart the project with:
npm run dev