Nuxt breadcrumbs (with Vuetify)

bread_crumbs.vue

<template>
  <v-container>
    <v-row>
      <v-col cols="12">
        <ul class="bread-crumbs__list d-flex align-center">
          <li class="bread-crumbs__list__item">
            <h4 class="font-weight-regular">
              <nuxt-link to="/">
                {{ $vuetify.breakpoint.xs ? 'Home' : 'Home page' }}
              </nuxt-link>
            </h4>
          </li>
          <template v-for="(crumb, index) in crumbs">
            <li :key="index" class="bread-crumbs__list__item">
              <h4 class="font-weight-regular">
                <nuxt-link
                  :to="crumb.path"
                  class="bread-crumbs__list__item__link"
                >
                  {{
                    filterPath === crumb.path && title !== null
                      ? titleFilter(title)
                      : titleFilter(crumb.title)
                  }}
                </nuxt-link>
              </h4>
            </li>
          </template>
        </ul>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
const titleCase = require('ap-style-title-case');

export default {
  props: {
    title: {
      type: String,
      default: null,
    },
  },
  computed: {
    filterPath() {
      const fullPath = () => {
        const path = this.$route.path;
        const fullPath = this.$route.fullPath;

        if (path.endsWith('/')) {
          if (this.$route.hash) {
            return fullPath.split('#')[0].slice(0, -1);
          } else {
            return fullPath.slice(0, -1);
          }
        } else if (this.$route.hash) {
          return fullPath.split('#')[0];
        } else {
          return fullPath;
        }
      };
      return fullPath();
    },
    crumbs() {
      const fullPath = () => {
        const path = this.$route.path;
        const fullPath = this.$route.fullPath;

        if (path.endsWith('/')) {
          if (this.$route.hash) {
            return fullPath.split('#')[0].slice(0, -1);
          } else {
            return fullPath.slice(0, -1);
          }
        } else if (this.$route.hash) {
          return fullPath.split('#')[0];
        } else {
          return fullPath;
        }
      };

      const params = fullPath().startsWith('/')
        ? fullPath().substring(1).split('/')
        : fullPath().split('/');
      const crumbs = [];

      let path = '';

      params.forEach((param) => {
        path = `${path}/${param}`;

        const match = this.$router.match(path);

        if (match.name !== null) {
          crumbs.push({
            title: titleCase(param.replace(/-/g, ' ')),
            ...match,
          });
        }
      });
      return crumbs;
    },
  },
  //- method down || i18n
  methods: {
    titleFilter(el) {
      const title = () => {
        if (el === 'Create') {
          return 'Создать';
        } else if (el === '') {
          return '';
        }  else if (el === '') {
          return '';
        }  else if (el === '') {
          return '';
        }  else if (el === '') {
          return '';
        }  else if (el === '') {
          return '';
        }  else if (el === '/') {
          return '';
        }  else {
          return el;
        }
      };

      return title();
    },
  },
};
</script>

index.vue

<template>
  <div>
    <bread-crumbs title="" />
  </div>
</template>

export default {
  components: {
    BreadCrumbs: () => import('~/components/global/bread_crumbs'),
  },
  head() {
    return {
      title: '',
    };
  },
};
</script>

package.json

{
  "devDependencies": {
    "ap-style-title-case": "^1.1.2",
  }
}