feat: breadcrumbs

Author: mtdvlpr

app/pages/people/[slug].vue

@@ -10,6 +10,10 @@
           <LazyPeopleAddModal />
         </template>
       </UDashboardNavbar>
+
+      <UDashboardToolbar>
+        <UBreadcrumb :items="breadcrumbs" />
+      </UDashboardToolbar>
     </template>
     <template #body>
       <div v-if="person">
@@ -29,7 +33,8 @@
 <script setup lang="ts">
 import { useRouteParams } from '@vueuse/router'
 
-const { locale } = useI18n()
+const { locale, t } = useI18n()
+const localePath = useLocalePath()
 const i18nStore = useI18nStore()
 const supabase = useSupabaseClient()
 const slug = useRouteParams<string>('slug')
@@ -39,8 +44,37 @@ const { data: person } = await useAsyncData(`person-${slug.value}`, async () =>
   return data
 })
 
+const name = computed(() =>
+  person.value ? i18nStore.translate(person.value.name) : 'Page not found'
+)
+
+const breadcrumbs = computed(() => [
+  {
+    icon: 'i-lucide-home',
+    label: t('home.title'),
+    to: localePath('/')
+  },
+  {
+    icon: 'i-lucide-users',
+    label: t('people.title'),
+    to: localePath('/people')
+  },
+  {
+    icon: 'i-lucide-user',
+    label: name.value,
+    to: localePath(`/people/${slug.value}`)
+  }
+])
+
+useSchemaOrg([
+  defineWebPage({ '@type': 'ItemPage' }),
+  defineBreadcrumb({
+    itemListElement: breadcrumbs.value.map((b) => ({ item: b.to, name: b.label }))
+  })
+])
+
 useSeoMeta({
   description: person.value?.description?.[locale.value] || undefined,
-  title: person.value ? i18nStore.translate(person.value.name) : undefined
+  title: name.value
 })
 </script>

app/pages/people/index.vue

@@ -46,6 +46,8 @@ const { t } = useI18n()
 const supabase = useSupabaseClient()
 const dataTable = useTemplateRef('table')
 
+useSchemaOrg([defineWebPage({ '@type': 'CollectionPage' })])
+
 useSeoMeta({
   description: t('people.description'),
   title: t('people.title')
@@ -108,7 +110,7 @@ const columns = computed((): TableColumn<Tables<'people'>>[] => [
     cell: ({ row }) =>
       actionCell([
         { label: t('general.actions'), type: 'label' },
-        { icon: 'i-lucide-list', label: t('person.view'), to: `/people/${row.original.id}` },
+        { icon: 'i-lucide-list', label: t('person.view'), to: `/people/${row.original.slug}` },
         { icon: 'i-lucide-edit', label: t('person.edit') },
         { type: 'separator' },
         {

nuxt.config.ts

@@ -1,6 +1,7 @@
 import type { LocaleObject } from '@nuxtjs/i18n'
 
 import { fileURLToPath } from 'node:url'
+import { defineOrganization } from 'nuxt-schema-org/schema'
 
 import type { AppLocale } from './shared/types/general.types'
 
@@ -62,6 +63,10 @@ export default defineNuxtConfig({
     }
   },
 
+  schemaOrg: {
+    identity: defineOrganization({ name: process.env.NUXT_SITE_NAME || 'BibleTime' })
+  },
+
   seo: { fallbackTitle: false },
 
   sitemap: {