back and breadcrumbs

src/composables/useBreadcrumbs.ts

@@ -0,0 +1,35 @@
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+export interface Breadcrumb {
+  title: string
+  to?: string
+  disabled?: boolean
+}
+
+/**
+ * Builds a breadcrumb trail from `meta.breadcrumb` on the matched route chain,
+ * so pages don't need to know their own position in the hierarchy.
+ */
+export function useBreadcrumbs() {
+  const route = useRoute()
+  const router = useRouter()
+
+  const breadcrumbs = computed<Breadcrumb[]>(() => {
+    const matched = route.matched.filter((record) => record.meta.breadcrumb)
+
+    return matched.map((record, index) => {
+      const { breadcrumb } = record.meta
+      const title = typeof breadcrumb === 'function' ? breadcrumb(route) : (breadcrumb as string)
+      const isLast = index === matched.length - 1
+      const to =
+        !isLast && record.name
+          ? router.resolve({ name: record.name, params: route.params }).path
+          : undefined
+
+      return { title, to, disabled: isLast }
+    })
+  })
+
+  return { breadcrumbs }
+}