How to create dynamic 'Breadcrumbs' in Nuxt.js

Question

Hello guys Im trying to create dynamic 'Breadcrumbs' in Nuxt.js, Does anyone have a working example how it should work

I have tried creating a simple sample but it is not working as expected, does anyone have a working solution ??

<template>
    <div class="breadcrumbs-component-wrapper">
        <b-breadcrumb class="breadcrumbs-holder">
            <b-breadcrumb-item
                v-for="(item, i) in breadcrumbs"
                :key="i"
                :to="item.name"
            >
               Test
            </b-breadcrumb-item>
        </b-breadcrumb>
    </div>
</template>

<script>
export default {
    computed: {
        breadcrumbs() {
            console.log( this.$route.matched);
            return this.$route.matched;
        },
    },
};
</script>

Answer 1

Here a breadcrumb component I used in old project. Feel free to adapt it to your needs. It's use buefy/bulma.

<template>
  <div class="level">
    <div class="level-left">
      <div class="level-item">
        <a class="button is-white" @click="$router.back()">
          <b-icon icon="chevron-left" size="is-medium" />
        </a>
      </div>
      <div class="level-item">
        <nav class="breadcrumb" aria-label="breadcrumbs">
          <ul>
            <li v-for="(item, i) in crumbs" :key="i" :class="item.classes">
              <nuxt-link :to="item.path">
                {{ item.name }}
              </nuxt-link>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    crumbs() {
      const crumbs = []
      this.$route.matched.forEach((item, i, { length }) => {
        const crumb = {}
        crumb.path = item.path
        crumb.name = this.$i18n.t('route.' + (item.name || item.path))

        // is last item?
        if (i === length - 1) {
          // is param route? .../.../:id
          if (item.regex.keys.length > 0) {
            crumbs.push({
              path: item.path.replace(/\/:[^/:]*$/, ''),
              name: this.$i18n.t('route.' + item.name.replace(/-[^-]*$/, ''))
            })
            crumb.path = this.$route.path
            crumb.name = this.$i18n.t('route.' + this.$route.name, [
              crumb.path.match(/[^/]*$/)[0]
            ])
          }
          crumb.classes = 'is-active'
        }

        crumbs.push(crumb)
      })

      return crumbs
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ a {
  @include transition();
}
</style>