public/glowing-fiesta-original
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

Made breadcrumbs reactive

Browse source
This commit is contained in:
Liviu Burcusel 2026-01-12 11:01:50 +01:00
parent 7b1ce9cb23
commit a7f75868cf
Signed by: liviu
GPG key ID: 6CDB37A4AD2C610C
6 changed files with 55 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

19
app/layouts/default/Breadcrumb.vue
View file

@ -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>