v2 first commit

resources/assets/js/components/Breadcrumb/Breadcrumb.vue

@@ -0,0 +1,26 @@
+<template>
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb"
+        :class="[{[`bg-${type}`]: type}, listClasses]">
+      <slot></slot>
+    </ol>
+  </nav>
+</template>
+<script>
+export default {
+  name: 'breadcrumb',
+  props: {
+    type: {
+      type: String,
+      default: '',
+      description: 'Breadcrumb background type'
+    },
+    listClasses: {
+      type: [String, Object],
+      default: '',
+      description: 'Breadcrumb list classes'
+    }
+  }
+};
+</script>
+<style></style>

resources/assets/js/components/Breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,16 @@
+<template>
+  <li class="breadcrumb-item" :class="{ active: active }"><slot></slot></li>
+</template>
+<script>
+export default {
+  name: 'breadcrumb-item',
+  props: {
+    active: {
+      type: Boolean,
+      default: false,
+      description: 'Whether breadcrumb item is active'
+    }
+  }
+};
+</script>
+<style></style>

resources/assets/js/components/Breadcrumb/RouteBreadcrumb.vue

@@ -0,0 +1,45 @@
+<template>
+  <bread-crumb list-classes="breadcrumb-links breadcrumb-dark">
+    <BreadCrumbItem>
+      <li class="breadcrumb-item">
+        <router-link to="/">
+          <i class="fas fa-home"></i>
+        </router-link>
+      </li>
+    </BreadCrumbItem>
+    <BreadCrumbItem
+      v-for="(route, index) in $route.matched.slice()"
+      :key="route.name"
+      :active="index === $route.matched.length - 1"
+      style="display:inline-block"
+    >
+      <router-link
+        :to="{ name: route.name }"
+        v-if="index < $route.matched.length - 1"
+      >
+        {{ route.name }}
+      </router-link>
+      <span v-else>{{ route.name }}</span>
+    </BreadCrumbItem>
+  </bread-crumb>
+</template>
+
+<script>
+  import BreadCrumb from './Breadcrumb';
+  import BreadCrumbItem from './BreadcrumbItem';
+
+  export default {
+    name: 'route-breadcrumb',
+    components: {
+      BreadCrumb,
+      BreadCrumbItem
+    },
+    methods: {
+      getBreadName(route) {
+        return route.name;
+      }
+    }
+  };
+</script>
+
+<style scoped></style>