From a7f75868cf2a0e10388541f76431a7bd26712742 Mon Sep 17 00:00:00 2001
From: Liviu Burcusel <x.liviu@gmail.com>
Date: Mon, 12 Jan 2026 11:01:50 +0100
Subject: [PATCH] Made breadcrumbs reactive

---
 app/layouts/default/Breadcrumb.vue | 19 ++++++++++++++-----
 app/pages/auth/create-account.vue  |  4 ++++
 app/pages/auth/login.vue           |  6 +++++-
 app/pages/auth/logout.vue          |  4 ++++
 app/pages/index.vue                |  4 ++++
 app/stores/breadcrumbs.ts          | 24 ++++++++++++++++++++++++
 6 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 app/stores/breadcrumbs.ts

diff --git a/app/layouts/default/Breadcrumb.vue b/app/layouts/default/Breadcrumb.vue
index 3450b43..2990d92 100644
--- a/app/layouts/default/Breadcrumb.vue
+++ b/app/layouts/default/Breadcrumb.vue
@@ -7,17 +7,26 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "~/components/ui/breadcrumb";
+
+import { useBreadcrumbStore } from "~/stores/breadcrumbs";
+const breadcrumbStore = useBreadcrumbStore();
 </script>
 
 <template>
   <Breadcrumb>
     <BreadcrumbList>
-      <BreadcrumbItem class="hidden md:block">
-        <BreadcrumbLink href="#"> Building Your Application </BreadcrumbLink>
-      </BreadcrumbItem>
-      <BreadcrumbSeparator class="hidden md:block" />
+      <template v-for="i in breadcrumbStore.items.length - 1" :key="i">
+        <BreadcrumbItem class="hidden md:block">
+          <BreadcrumbLink :href="breadcrumbStore.items[i - 1]?.to || ''">
+            {{ breadcrumbStore.items[i - 1]?.label || "Home" }}
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator class="hidden md:block" />
+      </template>
       <BreadcrumbItem>
-        <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+        <BreadcrumbPage>
+          {{ breadcrumbStore.items[breadcrumbStore.items.length - 1]?.label || "Home" }}
+        </BreadcrumbPage>
       </BreadcrumbItem>
     </BreadcrumbList>
   </Breadcrumb>
diff --git a/app/pages/auth/create-account.vue b/app/pages/auth/create-account.vue
index 96858b8..cecf990 100644
--- a/app/pages/auth/create-account.vue
+++ b/app/pages/auth/create-account.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
+import { useBreadcrumbStore } from "~/stores/breadcrumbs";
 import SignupForm from "@/components/SignupForm.vue";
+
+const breadcrumbStore = useBreadcrumbStore();
+breadcrumbStore.setBreadcrumbs([{ label: "Auth" }, { label: "Create Account", to: "/auth/create-account" }]);
 </script>
 
 <template>
diff --git a/app/pages/auth/login.vue b/app/pages/auth/login.vue
index c8c0dc3..fb41d63 100644
--- a/app/pages/auth/login.vue
+++ b/app/pages/auth/login.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import LoginForm from "@/components/LoginForm.vue";
+import { useBreadcrumbStore } from "~/stores/breadcrumbs";
+import LoginForm from "~/components/LoginForm.vue";
+
+const breadcrumbStore = useBreadcrumbStore();
+breadcrumbStore.setBreadcrumbs([{ label: "Auth" }, { label: "Login", to: "/auth/login" }]);
 </script>
 
 <template>
diff --git a/app/pages/auth/logout.vue b/app/pages/auth/logout.vue
index fbce4dc..8227e51 100644
--- a/app/pages/auth/logout.vue
+++ b/app/pages/auth/logout.vue
@@ -4,9 +4,13 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Field, FieldDescription } from "@/components/ui/field";
 
 import { useAuthStore } from "~/stores/auth";
+import { useBreadcrumbStore } from "~/stores/breadcrumbs";
 
 const authStore = useAuthStore();
 await authStore.init();
+
+const breadcrumbStore = useBreadcrumbStore();
+breadcrumbStore.setBreadcrumbs([{ label: "Auth" }, { label: "Logout", to: "/auth/logout" }]);
 </script>
 
 <template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 2764077..65c5c37 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { useBreadcrumbStore } from "~/stores/breadcrumbs";
 import { Button } from "@/components/ui/button";
 
 const lastClicked = ref<string>("None");
@@ -7,6 +8,9 @@ const lastClicked = ref<string>("None");
 const buttonClicked = (variant: string) => {
   lastClicked.value = variant;
 };
+
+const breadcrumbStore = useBreadcrumbStore();
+breadcrumbStore.setBreadcrumbs([{ label: "Homepage", to: "/" }]);
 </script>
 
 <template>
diff --git a/app/stores/breadcrumbs.ts b/app/stores/breadcrumbs.ts
new file mode 100644
index 0000000..1d929bd
--- /dev/null
+++ b/app/stores/breadcrumbs.ts
@@ -0,0 +1,24 @@
+import { defineStore } from "pinia";
+
+export interface BreadcrumbItem {
+  label: string;
+  to?: string;
+}
+
+export const useBreadcrumbStore = defineStore("breadcrumb", {
+  state: () => ({
+    items: [] as BreadcrumbItem[],
+  }),
+
+  actions: {
+    setBreadcrumbs(items: BreadcrumbItem[]) {
+      this.items = items;
+    },
+    addBreadcrumb(item: BreadcrumbItem) {
+      this.items.push(item);
+    },
+    clear() {
+      this.items = [];
+    },
+  },
+});