app_vue2/components/Layout/SubHeader/Breadcrumbs.vue

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

<script lang="ts">
import { defineComponent, computed, useContext, useRouter, ComputedRef } from '@nuxtjs/composition-api'
import { AnyJson } from '~/types/interfaces'

export default defineComponent({
  setup () {
    const { route, $config, app: { i18n } } = useContext()
    const $router = useRouter()
    const homeUrl:string = $config.baseURL_adminLegacy

    const items:ComputedRef<Array<AnyJson>> = computed(() => {
      const crumbs:Array<AnyJson> = []
      crumbs.push({
        text: i18n.t('welcome'),
        href: homeUrl
      })

      const fullPath:string = route.value.path
      const params:Array<string> = fullPath.startsWith('/') ? fullPath.substring(1).split('/') : fullPath.split('/')
      let path:string = ''
      params.forEach((param) => {
        path = `${path}/${param}`
        const match = $router.match(path)
        if (match.name !== null) {
          crumbs.push({
            text: !parseInt(param, 10) ? i18n.t(param + '_breadcrumbs') : i18n.t('item'),
            nuxt: true,
            'exact-path': true,
            to: path
          })
        }
      })

      return crumbs
    })

    return {
      items
    }
  }
})
</script>