ShowEasyFrontEnd/FrontEnd/components/Breadcrumbs.vue

<template>
  <v-breadcrumbs :items="routes">
    <template #divider>
      <v-icon>mdi-chevron-right</v-icon>
    </template>
  </v-breadcrumbs>
</template>

<script>
export default {
  name: "Breadcrumbs",
  data() {
    return {
      width: undefined,
    };
  },
  created() {
    if (process.client) {
      this.width = window.innerWidth;
    }
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener("resize", this.onResize);
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.onResize);
  },
  computed: {
    windowWidth() {
      if (process.client) {
        this.width = window.innerWidth;
      }
      return this.width;
    },
    routes() {
      const { matched } = this.$nuxt.$route;
      const home = {
        text: "ShowEasy",
        href: this.localePath("/"),
        disabled: false,
      };
      return [
        home,
        ...matched.map(({ meta, path }) => {
          const route = {
            text: meta.name,
            href: this.localePath(path),
            disabled: false,
          };
          return route;
        }),
      ];
    },
  },
  methods: {
    onResize() {
      if (process.client) {
        this.width = window.innerWidth;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
:deep() {
  .v-breadcrumbs__item {
    color: black !important;
  }
}
</style>