breadcrumbs

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

Install

$ npm install vue-2-breadcrumbs

Note: This project is compatible with node v10+

Usage

import Vue from 'vue';
import VueBreadcrumbs from 'vue-2-breadcrumbs';

Vue.use(VueBreadcrumbs);

Meta in router

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: { template: '<h2>Home</h2>' },
      meta: {
        breadcrumb: 'Home'
      }
    },
    {
      path: '/params',
      name: 'Params',
      component: { template: '<h2>Params</h2>' },
      meta: {
        breadcrumb: routeParams => `route params id: ${routeParams.id}`
      }
    },
    {
      path: '/context',
      name: 'Context',
      component: { template: '<h2>Context</h2>' },
      meta: {
        breadcrumb() {
            const { name } = this.$route;
            return `name "${name}" of context route`;
        }
      }
    }
  ]
});

Options

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

import Vue from 'vue';
import VueBreadcrumbs from 'vue-2-breadcrumbs';

Vue.use(VueBreadcrumbs, {
  template:
    '        <nav v-if="$breadcrumbs.length" aria-label="breadcrumb">\n' +
    '            <ol class="breadcrumb">\n' +
    '                <li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">\n' +
    '                    <router-link :to="{ path: getPath(crumb) }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>' +
    '                </li>\n' +
    '            </ol>\n' +
    '        </nav>'
});