app/components/Layout/SubHeader/Breadcrumbs.vue

<template>
  <v-breadcrumbs :items="items" />
</template>

<script setup lang="ts">
import { computed } from '@vue/reactivity'
import type { ComputedRef } from '@vue/reactivity'
import type { AnyJson } from '~/types/data'
import { useI18n } from 'vue-i18n'
import UrlUtils from '~/services/utils/urlUtils'

const runtimeConfig = useRuntimeConfig()
const i18n = useI18n()
const router = useRouter()

const items: ComputedRef<Array<AnyJson>> = computed(() => {
  const crumbs: Array<AnyJson> = []
  const baseUrl =
    runtimeConfig.baseUrlAdminLegacy ??
    runtimeConfig.public.baseUrlAdminLegacy

  crumbs.push({
    title: i18n.t('welcome'),
    href: UrlUtils.join(baseUrl, '#', 'dashboard'),
  })

  const pathPart: Array<string> = UrlUtils.split(router.currentRoute.value.path)

  let path: string = ''

  pathPart.forEach((part) => {
    path = UrlUtils.join(path, part)

    let match

    match = router.resolve(path)
    if (match.name) {
      crumbs.push({
        title: !parseInt(part, 10)
          ? i18n.t(part + '_breadcrumbs')
          : i18n.t('item'),
        exact: true,
        to: path,
      })
    }
  })

  return crumbs
})
</script>

<style scoped lang="scss">
:deep(a.v-breadcrumbs-item--disabled) {
  color: rgb(var(--v-theme-on-neutral)) !important;
  opacity: 1 !important;
}
</style>