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/)

[![Actions Status](https://github.com/Scrum/vue-2-breadcrumbs/workflows/Actions%20Status/badge.svg?style=flat-square)](https://github.com/Scrum/vue-2-breadcrumbs/actions?query=workflow%3A%22CI+tests%22)[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg?style=flat-square)](https://vuejs.org/)[![node](https://img.shields.io/node/v/post-sequence.svg?style=flat-square)]()[![npm version](https://img.shields.io/npm/v/vue-2-breadcrumbs.svg?style=flat-square)](https://www.npmjs.com/package/vue-2-breadcrumbs)[![Dependency Status](https://david-dm.org/scrum/vue-2-breadcrumbs.svg?style=flat-square)](https://david-dm.org/scrum/vue-2-breadcrumbs)[![XO code style](https://badgen.net/xo/status/chalk?style=flat-square)](https://github.com/sindresorhus/xo)[![Coveralls status](https://img.shields.io/coveralls/Scrum/vue-2-breadcrumbs.svg?style=flat-square)](https://coveralls.io/r/Scrum/vue-2-breadcrumbs)

[![npm downloads](https://img.shields.io/npm/dm/vue-2-breadcrumbs.svg?style=flat-square)](https://www.npmjs.com/package/vue-2-breadcrumbs)[![npm](https://img.shields.io/npm/dt/vue-2-breadcrumbs.svg?style=flat-square)](https://www.npmjs.com/package/vue-2-breadcrumbs)[![size](https://badgen.net/bundlephobia/minzip/vue-2-breadcrumbs?color=364a5e&style=flat)](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, {

  template:

    '        \n' +

    '            
\n' +

    '                
\n' +

    '                    {{ getBreadcrumb(crumb.meta.breadcrumb) }}' +

    '                
\n' +

    '            
\n' +

    '        '

});

```