https://github.com/scrum/vue-2-breadcrumbs
Vue breadcrumbs
https://github.com/scrum/vue-2-breadcrumbs
breadcrumbs vue2
Last synced: 3 months ago
JSON representation
Vue breadcrumbs
- Host: GitHub
- URL: https://github.com/scrum/vue-2-breadcrumbs
- Owner: Scrum
- License: mit
- Created: 2017-03-28T11:43:04.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-10-27T16:19:14.000Z (over 1 year ago)
- Last Synced: 2025-04-04T23:08:41.789Z (3 months ago)
- Topics: breadcrumbs, vue2
- Language: TypeScript
- Homepage:
- Size: 2.97 MB
- Stars: 98
- Watchers: 1
- Forks: 20
- Open Issues: 10
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- Funding: .github/funding.yml
- License: license
Awesome Lists containing this project
README
#
breadcrumbs
> Vue breadcrumbs builds on the official [vue-router](https://github.com/vuejs/vue-router) package to provide simple breadcrumbs. [Demo](https://scrum.github.io/vue-2-breadcrumbs/)[](https://github.com/Scrum/vue-2-breadcrumbs/actions?query=workflow%3A%22CI+tests%22)[](https://vuejs.org/)[]()[](https://www.npmjs.com/package/vue-2-breadcrumbs)[](https://david-dm.org/scrum/vue-2-breadcrumbs)[](https://github.com/sindresorhus/xo)[](https://coveralls.io/r/Scrum/vue-2-breadcrumbs)
[](https://www.npmjs.com/package/vue-2-breadcrumbs)[](https://www.npmjs.com/package/vue-2-breadcrumbs)[](https://www.npmjs.com/package/vue-2-breadcrumbs)
## Support
- Support Nuxjs ([example](https://github.com/Scrum/vue-2-breadcrumbs/tree/master/example/nuxtjs))
- Support SSR
- Setting parent route without need to actually nest it in children array
- Customized template
- Dynamic breadcrumbs
- Dynamic parent
- Dynamic label
- Shorthand labeling (`breadcrumb: 'Page Label'`)
- Sub-routing## Install
```bash
$ npm install vue-2-breadcrumbs
```> **Note:** This project is compatible with node v10+
## Usage
```js
import Vue from 'vue';
import VueBreadcrumbs from 'vue-2-breadcrumbs';
import App from './App.vue';Vue.use(VueBreadcrumbs);
```
> Note: After that `` component would be at your disposal.## Meta in router
```js
import Vue from 'vue';
import VueRouter from 'vue-router';Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{
path: '/',
name: 'Home',
component: { template: 'Home
' },
meta: {
breadcrumb: 'Home'
}
},
{
path: '/params',
name: 'Params',
component: { template: 'Params
' },
meta: {
breadcrumb: routeParams => `route params id: ${routeParams.id}`
}
},
{
path: '/context',
name: 'Context',
component: { template: 'Context
' },
meta: {
breadcrumb() {
const { name } = this.$route;
return `name "${name}" of context route`;
}
}
},
{
path: '/parent',
component: { template: '' },
meta: {
breadcrumb: {
label: 'Parent to Params',
parent: 'Params'
}
},
{
name: 'dynamic-parent',
path: '/dynamic-parent',
component: { template: 'Dynamic Parent
' },
meta: {
breadcrumb() {
const { name } = this.$route;return {
label: name,
parent: 'settings'
};
}
}
}
]
});
```
## Options
> An options object can also be passed into the plugin to specify your own template and rendering methods if desired. For example:```js
import Vue from 'vue';
import VueBreadcrumbs from 'vue-2-breadcrumbs';Vue.use(VueBreadcrumbs, {
\n' +
template:
' \n' +
'
' '
});
```