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: 2 months ago
JSON representation
Breadcrumbs for Vue.js
- Host: GitHub
- URL: https://github.com/samturrell/vue-breadcrumbs
- Owner: samturrell
- License: mit
- Archived: true
- Created: 2016-04-17T16:54:10.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-04-14T10:29:22.000Z (over 3 years ago)
- Last Synced: 2024-10-13T06:12:44.926Z (3 months ago)
- Topics: breadcrumbs, javascript, plugin, vue, vue-breadcrumbs
- Language: JavaScript
- Size: 47.9 KB
- Stars: 146
- Watchers: 4
- Forks: 27
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-cn - vue-breadcrumbs - router. By [@SamTurrell](https://github.com/samturrell) (Awesome Vue.js [](https://github.com/sindresorhus/awesome) / Libraries & Plugins)
README
# vue-breadcrumbs
[](https://www.npmjs.com/package/vue-breadcrumbs)
[](https://www.npmjs.com/package/vue-breadcrumbs)
[](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)