Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/scrum/vue-2-breadcrumbs

Vue breadcrumbs
https://github.com/scrum/vue-2-breadcrumbs

breadcrumbs vue2

Last synced: 2 days 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 7 years ago)
Default Branch: master
Last Pushed: 2023-10-27T16:19:14.000Z (11 months ago)
Last Synced: 2024-09-21T09:06:32.700Z (12 days ago)
Topics: breadcrumbs, vue2
Language: TypeScript
Homepage:
Size: 2.97 MB
Stars: 98
Watchers: 2
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' +

    '        '

});

```