app_vue2/components/Layout/Breadcrumbs.vue

<template>
  <ol>
    <li>
      <a class="no-decoration" :href="homeUrl + '/'">
        <span class="ot_green--text">{{$t('welcome')}}</span>
      </a>
    </li>
    <li
      v-for="(crumb, index) in crumbs"
      :key="index"
    >
      <NuxtLink class="no-decoration" :to="crumb.path">
        <span class="ot_green--text">{{
          crumb.title
        }}</span>
      </NuxtLink>
    </li>
  </ol>
</template>

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

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

      const crumbs = computed(()=>{
        const fullPath = route.value.path
        const params = fullPath.startsWith('/') ? fullPath.substring(1).split('/') : fullPath.split('/')
        const crumbs:Array<AnyJson> = []
        let path = ''
        params.forEach((param, index) => {
          path = `${path}/${param}`
          const match = $router.match(path)
          if (match.name !== null) {
            const title = !parseInt(param, 10) ? i18n.t(param.replace(/-/g, ' ') + '_breadcrumbs') : i18n.t('item')

            crumbs.push({
              title: title,
              ...match,
            })
          }
        })
        return crumbs
      })


      return {
        crumbs,
        homeUrl
      }
    }
  })
</script>

<style scoped>
  ol {
    list-style: none;
    padding-left: 12px;
    padding-top: 10px;
  }
  li {
    display: inline;
  }
  li:after {
    content: ' / ';
    display: inline;
    font-size: 12px;
    color: grey ;
    padding: 0 0.0725em 0 0.15em;
  }
  li:last-child:after {
    content: '';
  }

  li a.nuxt-link-exact-active.nuxt-link-active > span {
    color: grey !important;
  }

  li a > span{
    font-size: 12px;
  }
</style>