35 lines
1,013 B
Vue
35 lines
1,013 B
Vue
<script setup lang="ts">
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator,
|
|
} from "~/components/ui/breadcrumb";
|
|
|
|
import { useBreadcrumbStore } from "~/stores/breadcrumbs";
|
|
const breadcrumbStore = useBreadcrumbStore();
|
|
</script>
|
|
|
|
<template>
|
|
<ClientOnly>
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
<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 }}
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator class="hidden md:block" />
|
|
</template>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbPage>
|
|
{{ breadcrumbStore.items[breadcrumbStore.items.length - 1]?.label }}
|
|
</BreadcrumbPage>
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
</ClientOnly>
|
|
</template>
|