Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/samturrell/vue-breadcrumbs

Breadcrumbs for Vue.js
https://github.com/samturrell/vue-breadcrumbs

breadcrumbs javascript plugin vue vue-breadcrumbs

Last synced: 26 days ago
JSON representation

Breadcrumbs for Vue.js

Lists

README 

        
# vue-breadcrumbs



[![npm](https://img.shields.io/npm/dt/vue-breadcrumbs.svg)](https://www.npmjs.com/package/vue-breadcrumbs)

[![npm](https://img.shields.io/npm/v/vue-breadcrumbs.svg)](https://www.npmjs.com/package/vue-breadcrumbs)

[![GitHub stars](https://img.shields.io/github/stars/samturrell/vue-breadcrumbs.svg?style=social&label=Star)](http://github.com/samturrell/vue-breadcrumbs)



Vue breadcrumbs builds on the official vue-router package to provide simple breadcrumbs. This package is backwards compatible to support both Vue 1.x and Vue 2.x.

 

[DEMO](https://samturrell.github.io/vue-breadcrumbs/example)



## Installation

```html



```



```js

Vue.use(VueBreadcrumbs)

```



or via npm:



```sh

$ npm install vue-breadcrumbs

```



```js

import VueBreadcrumbs from 'vue-breadcrumbs'



Vue.use(VueBreadcrumbs)

```



Define the matching breadcrumb text in your routes.



An options object can also be passed into the plugin to specify your own template and rendering methods if desired. For example:



```js

Vue.use(VueBreadcrumbs, {

  template: ' ' +

    '{{ crumb | crumbText }} ' +

    ''

});

```



By default the plugin will autoregister a `breadcrumbs` component which is globally accessible in your app (thanks to [HermannBjorgvin](https://github.com/HermannBjorgvin). To disable this functionality you can set the `registerComponent` option to `false` when registering the component, like so:



```js

Vue.use(VueBreadcrumbs, {

  registerComponent: false

});

```



Note: if referencing directly in the browser rather than as a module, there is no way to stop the default component from registering.



## Usage

### Vue 1.x 



Use the `breadcrumb:` property of a route or subRoute, e.g.:



```js

router.map({

  '/': {

    component: Page,

    breadcrumb: 'Home Page',

    subRoutes: {

      '/foo': {

        component: Foo,

        breadcrumb: 'Foo Page'

      },

      '/bar': {

        component: Bar,

        breadcrumb: 'Bar Page'

      }

    }

  }

})

```

 

### Vue 2.x



Use the `meta.breadcrumb:` property of a route or child route, e.g.:



```js

new VueRouter({

  routes: [

    {

      path: '/', 

      component: Page,

      meta: {

        breadcrumb: 'Home Page',

      },

      children: [

        {

          path: '/foo', 

          component: Foo,

          meta: {

            breadcrumb: 'Foo Page'  

          }

        },

        {

          path: '/bar', 

          component: Bar,

          meta: {

            breadcrumb: 'Bar Page'

          }

        }

      ]

    }

  ]

})

```



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



# License



[MIT](http://opensource.org/licenses/MIT)