app/components/Layout/SubHeader/Breadcrumbs.vue

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

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

interface BreadcrumbItem {
  title: string
  href?: string
  to?: string
  exact?: boolean
}

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

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

  if (!organizationProfile.isFreemiumProduct) {
    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)
    const match = router.resolve(path)
    if (match.name) {
      crumbs.push({
        title: i18n.t(match.name + '_breadcrumbs'),
        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>