vue-coe-breadcrumb ✅

✨ Example✨

Competitive Diferentials

• intuitive and easy to set up
• centralized in the store (that is, easy to debug)
• accepts dynamic and static labels
• data is persisted while reloading (though centralized in the store)

Install

yarn add vue-coe-breadcrumb or npm i vue-coe-breadcrumb

Include Plugin

import Vue from 'vue'

import { VueCoeBreadcrumb } from 'vue-coe-breadcrumb'

Vue.use(VueCoeBreadcrumb, store, options)

Register in component

<script>
import CoeBreadcrumb from 'vue-coe-breadcrumb'

export default {
  components: { CoeBreadcrumb }
  ...
</script>

Use

<script>
export default {
  // ...
  
  breadcrumb: {
    getters: 'anyGettersFromYourStore', // the label of this route / crumb will be populated by the called getters value
    name: 'nameOfTheCurrentRoute'
  }
  
  // ...
}
</script>

options: plugin instance

Name	Default	Required	About
storeName	coebreadcrumb	false	store name
store		true	instance of store
separatorText	|	false	separator text
hidden	[]	false	array of strings with the name of the routes that will be hidden

slots: component

• crumbs
• name