Breadcrumbs on nuxt.js?

Question

JavaScript

Maybe someone knows about the finished component or is there any guide on how to make "breadcrumbs" on nuxt?

Answer 1

<template lang="pug">
  div.breadcrumbs
    router-link(
      v-for="link, i in breadcrumbsLinks"
      :key="i"
      :to="link"
    ).breadcrumps__level {{link.meta.title}}
</template>

<script>
  export default {
    name: 'breadcrumbs',
    computed: {
      breadcrumbsLinks () {
        let tmp = []
        if (this.$route.matched) {
          this.$route.matched.forEach(link => {
            tmp.push(Object.assign({meta: {title: 'Title not found in meta'}}, link))
          })
        }
        if (tmp.length === 0) {
          tmp.push({path: '/', meta: {title: 'Home'}})
        }
        return tmp
      }
    }
  }
</script>