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> = []

  crumbs.push({
    title: i18n.t('welcome'),
    href: UrlUtils.join(runtimeConfig.baseUrlAdminLegacy, '#', '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>