Inventory-Shield/vue-breadcrumbs

Breadcrumbs for Vue.js

vue2-breadcrumbs

Fork from samturrell/vue-breadcrumbs

Vue breadcrumbs builds on the official vue-router package to provide simple breadcrumbs.

Support Vue 2.0

Usage

<script src="../dist/vue-breadcrumbs.min.js"></script>

Vue.use(VueBreadcrumbs)

or with browserify/bundler:

$ npm install vue2-breadcrumbs

var VueBreadcrumbs = require('vue2-breadcrumbs')

Vue.use(VueBreadcrumbs)

Define the matching breadcrumb text in your vue-router routes as the breadcrumb: property of a route or subRoute, e.g.:

new VueRouter({
  {
    path: '/',
    component: Page,
    meta: {
      breadcrumb: 'Home Page'
    }
  },
  {
    path: '/foo',
    component: Foo,
    meta: {
      breadcrumb: 'Foo Page'
    }
  },
  {
    path: '/about',
    component: Page,
    meta: {
      breadcrumb: 'About Us'
    },
    children: [
      {
        path: 'foo',
        component: Foo,
        meta: {
          breadcrumb: 'Foo About'
        }
      },
      {
        path: 'bar',
        component: Bar,
        meta: {
          breadcrumb: 'Bar About'
        }
      },
    ]
  }
});

You can then render the breadcrumbs using the included component or using your own markup logic with the this.$breadcrumbs property which will return an array of active routes.

License

MIT