Breadcrumbs for Vue.js 2.0
npm install vue-2-breadcrumbs![node]()

breadcrumb: 'Page Label')``bash`
$ npm install vue-2-breadcrumbs
> Note: This project is compatible with node v10+
`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.
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, {
template:
' '
});
``