Dump bootstrap-vue-next integration package, use regular bootstrap

src/app.vue

@@ -6,9 +6,22 @@
 </template>
 
 <script setup lang="ts">
+const bootstrap = useNuxtApp().$bootstrap;
+
 useHead({
-	titleTemplate: (titleChunk: string): string => {
+	titleTemplate: (titleChunk: string | undefined): string | null => {
 		return titleChunk ? `${titleChunk} - website-vue` : 'website-vue';
 	}
 })
+
+// Access bootstrap after the DOM is ready
+onMounted(() => {
+	// Initialize popovers
+	const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
+	const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
+
+	// Initialize tooltips
+	const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+	const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
+});
 </script>

src/components/Shared/NavMenu.vue

@@ -1,32 +1,27 @@
 <template>
-	<BNavbar v-b-color-mode="'dark'" toggleable="lg" variant="dark" fixed="top">
-		<BNavbarBrand to="/">
-			<IFaHome /> Home
-		</BNavbarBrand>
-		<BNavbarToggle target="nav-collapse" />
-		<BCollapse id="nav-collapse" is-nav>
-			<!-- Left aligned nav items -->
-			<BNavbarNav>
-				<BNavItem to="/articles">Articles</BNavItem>
-				<BNavItem to="/todos">Todos</BNavItem>
-			</BNavbarNav>
-			<!-- Right aligned nav items -->
-			<BNavbarNav class="ms-auto mb-2 mb-lg-0">
-				<BNavItem href="https://git.riyyi.com/riyyi" target="_blank">
-					<IFaCoffee /> Gitea
-				</BNavItem>
-				<BNavItem href="https://github.com/riyyi" target="_blank">
-					<IFaGithub /> Github
-				</BNavItem>
-				<BNavItem href="https://gitlab.com/riyyi" target="_blank">
-					<IFaGitlab /> Gitlab
-				</BNavItem>
-				<BNavItem href="https://linkedin.com/in/rickvanvonderen" target="_blank">Linked
-					<IFaLinkedinSquare />
-				</BNavItem>
-			</BNavbarNav>
-		</BCollapse>
-	</BNavbar>
+	<nav class="navbar navbar-expand-lg fixed-top bg-dark" data-bs-theme="dark">
+		<div class="container-fluid">
+			<NuxtLink class="navbar-brand" to="/"><IFaHome /> Home</NuxtLink>
+			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
+				aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
+				<span class="navbar-toggler-icon"></span>
+			</button>
+			<div class="collapse navbar-collapse" id="navbarText">
+				<!-- Left aligned nav items -->
+				<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll">
+					<li class="nav-item"><NuxtLink to="/articles" class="nav-link">Articles</NuxtLink></li>
+					<li class="nav-item"><NuxtLink to="/todos" class="nav-link">Todos</NuxtLink></li>
+				</ul>
+				<!-- Right aligned nav items -->
+				<ul class="navbar-nav">
+					<li class="nav-item"><a href="https://git.riyyi.com/riyyi" class="nav-link" target="_blank">Gitea <IFaCoffee /></a></li>
+					<li class="nav-item"><a href="https://github.com/riyyi" class="nav-link" target="_blank">Github <IFaGithub /></a></li>
+					<li class="nav-item"><a href="https://gitlab.com/riyyi" class="nav-link" target="_blank">Gitlab <IFaGitlab /></a></li>
+					<li class="nav-item"><a href="https://linkedin.com/in/rickvanvonderen" class="nav-link" target="_blank">Linked<IFaLinkedinSquare /></a></li>
+				</ul>
+			</div>
+		</div>
+	</nav>
 </template>
 
 <style scoped>

src/plugins/bootstrap.client.ts

@@ -0,0 +1,5 @@
+import bootstrap from "bootstrap/dist/js/bootstrap.bundle.min";
+
+export default defineNuxtPlugin(nuxtApp => {
+	nuxtApp.provide("bootstrap", bootstrap);
+})