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

nuxt.config.ts

@@ -4,9 +4,6 @@ import ViteComponents from "unplugin-vue-components/vite"
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-	bootstrapVueNext: {
-		css: false
-	},
 	compatibilityDate: "2024-11-01",
 	content: {
 		build: {
@@ -28,7 +25,6 @@ export default defineNuxtConfig({
 	},
 	css: [
 		"bootstrap/dist/css/bootstrap.min.css",
-		"bootstrap-vue-next/dist/bootstrap-vue-next.css",
 		"~/assets/css/style.css"
 	],
 	devtools: { enabled: true },
@@ -36,7 +32,6 @@ export default defineNuxtConfig({
 		public: "../public"
 	},
 	modules: [
-		"@bootstrap-vue-next/nuxt",
 		"@nuxt/content",
 		"@nuxt/eslint",
 		"@pinia/nuxt",

package-lock.json

@@ -8,6 +8,8 @@
 			"hasInstallScript": true,
 			"dependencies": {
 				"@pinia/nuxt": "^0.10.1",
+				"@popperjs/core": "^2.11.8",
+				"bootstrap": "^5.3.3",
 				"pinia-plugin-persistedstate": "^4.1.3",
 				"uuid": "^11.0.3",
 				"vue": "latest",
@@ -15,18 +17,16 @@
 				"zod": "^3.23.8"
 			},
 			"devDependencies": {
-				"@bootstrap-vue-next/nuxt": "^0.28.3",
 				"@iconify-json/fa": "^1.2.1",
 				"@iconify-json/fa-regular": "^1.2.1",
 				"@iconify-json/fa-solid": "^1.2.1",
 				"@nuxt/content": "^3.4.0",
 				"@nuxt/eslint": "^1.2.0",
+				"@types/bootstrap": "^5.2.10",
 				"@types/bun": "latest",
 				"@vue/compiler-sfc": "^3.5.13",
 				"@vue/language-server": "^2.1.10",
 				"@vue/typescript-plugin": "^2.1.10",
-				"bootstrap": "^5.3.3",
-				"bootstrap-vue-next": "^0.28.3",
 				"nuxt": "^3.14.1592",
 				"typescript": "^5.7.2",
 				"unplugin-icons": "^22.1.0",
@@ -471,21 +471,6 @@
 				"node": ">=6.9.0"
 			}
 		},
-		"node_modules/@bootstrap-vue-next/nuxt": {
-			"version": "0.28.3",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@nuxt/kit": "^3.16.1"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/bootstrap-vue-next"
-			},
-			"peerDependencies": {
-				"bootstrap-vue-next": "^0.28.3"
-			}
-		},
 		"node_modules/@clack/core": {
 			"version": "0.4.1",
 			"dev": true,
@@ -1856,9 +1841,9 @@
 		},
 		"node_modules/@popperjs/core": {
 			"version": "2.11.8",
-			"dev": true,
+			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+			"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
 			"license": "MIT",
-			"peer": true,
 			"funding": {
 				"type": "opencollective",
 				"url": "https://opencollective.com/popperjs"
@@ -2262,6 +2247,16 @@
 				"node": ">=10.13.0"
 			}
 		},
+		"node_modules/@types/bootstrap": {
+			"version": "5.2.10",
+			"resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.10.tgz",
+			"integrity": "sha512-F2X+cd6551tep0MvVZ6nM8v7XgGN/twpdNDjqS1TUM7YFNEtQYWk+dKAnH+T1gr6QgCoGMPl487xw/9hXooa2g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@popperjs/core": "^2.9.2"
+			}
+		},
 		"node_modules/@types/bun": {
 			"version": "1.2.8",
 			"resolved": "https://registry.npmjs.org/@types/bun/-/bun-1.2.8.tgz",
@@ -3445,7 +3440,6 @@
 		},
 		"node_modules/bootstrap": {
 			"version": "5.3.3",
-			"dev": true,
 			"funding": [
 				{
 					"type": "github",
@@ -3461,32 +3455,6 @@
 				"@popperjs/core": "^2.11.8"
 			}
 		},
-		"node_modules/bootstrap-vue-next": {
-			"version": "0.28.3",
-			"dev": true,
-			"license": "MIT",
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/bootstrap-vue-next"
-			},
-			"peerDependencies": {
-				"@floating-ui/vue": "*",
-				"@vueuse/core": "*",
-				"vue": "^3.5.13",
-				"vue-router": "*"
-			},
-			"peerDependenciesMeta": {
-				"@floating-ui/vue": {
-					"optional": true
-				},
-				"@vueuse/core": {
-					"optional": true
-				},
-				"vue-router": {
-					"optional": true
-				}
-			}
-		},
 		"node_modules/brace-expansion": {
 			"version": "2.0.1",
 			"dev": true,

package.json

@@ -11,6 +11,8 @@
 	},
 	"dependencies": {
 		"@pinia/nuxt": "^0.10.1",
+		"@popperjs/core": "^2.11.8",
+		"bootstrap": "^5.3.3",
 		"pinia-plugin-persistedstate": "^4.1.3",
 		"uuid": "^11.0.3",
 		"vue": "latest",
@@ -18,18 +20,16 @@
 		"zod": "^3.23.8"
 	},
 	"devDependencies": {
-		"@bootstrap-vue-next/nuxt": "^0.28.3",
 		"@iconify-json/fa": "^1.2.1",
 		"@iconify-json/fa-regular": "^1.2.1",
 		"@iconify-json/fa-solid": "^1.2.1",
 		"@nuxt/content": "^3.4.0",
 		"@nuxt/eslint": "^1.2.0",
+		"@types/bootstrap": "^5.2.10",
 		"@types/bun": "latest",
 		"@vue/compiler-sfc": "^3.5.13",
 		"@vue/language-server": "^2.1.10",
 		"@vue/typescript-plugin": "^2.1.10",
-		"bootstrap": "^5.3.3",
-		"bootstrap-vue-next": "^0.28.3",
 		"nuxt": "^3.14.1592",
 		"typescript": "^5.7.2",
 		"unplugin-icons": "^22.1.0",

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

tsconfig.json

@@ -1,8 +1,10 @@
 {
 	// https://nuxt.com/docs/guide/concepts/typescript
 	"extends": "./.nuxt/tsconfig.json",
-	"include": ["components.d.ts"],
 	"compilerOptions": {
-		"types": ["unplugin-icons/types/vue"]
+		"types": [
+			"bootstrap",
+			"unplugin-icons/types/vue"
+		]
 	}
 }