nvs-vue-breadcrumbs

Vue Breadcrumbs

Gives you the possibility to add a global breadcrumbs variable, to build breadcrumbs

Installation

$ yarn add nvs-vue-breadcrumbs

Then include it in your Vue-app:

import NVSVueBreadcrumbs from 'nvs-vue-breadcrumbs'

...
Vue.use(NVSVueBreadcrumbs)

Implementation

You can add a breadcrumb meta property to routes that you would like to include in the breadcrumbs:

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

new VueRouter({
    routes: [
        {
            path: '/',
            component: Page,
            meta: {
                breadcrumb: 'Home Page',
            },
            children: [
                {
                    path: '/foo',
                    component: Foo,
                    meta: {
                        breadcrumb: {
                            text: 'Foo Page',
                        },
                    },
                },
                {
                    path: '/bar',
                    component: Bar,
                    meta: {
                        breadcrumb: {
                            text: 'Bar Page',
                        },
                    },
                },
            ],
        },
    ],
})