Made breadcrumbs reactive

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>

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>

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>

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>

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>

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 = [];
+    },
+  },
+});