{"id":15391951,"url":"https://github.com/scrum/vue-2-breadcrumbs","last_synced_at":"2025-04-07T10:26:53.828Z","repository":{"id":19193889,"uuid":"86453234","full_name":"Scrum/vue-2-breadcrumbs","owner":"Scrum","description":"Vue breadcrumbs","archived":false,"fork":false,"pushed_at":"2023-10-27T16:19:14.000Z","size":3115,"stargazers_count":98,"open_issues_count":10,"forks_count":20,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-04T23:08:41.789Z","etag":null,"topics":["breadcrumbs","vue2"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Scrum.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":".github/funding.yml","license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://paypal.me/scrumpay"]}},"created_at":"2017-03-28T11:43:04.000Z","updated_at":"2024-01-03T14:08:50.000Z","dependencies_parsed_at":"2024-01-08T08:58:02.001Z","dependency_job_id":null,"html_url":"https://github.com/Scrum/vue-2-breadcrumbs","commit_stats":{"total_commits":299,"total_committers":15,"mean_commits":"19.933333333333334","dds":0.3411371237458194,"last_synced_commit":"f247b99deacb47d2ea162101cd6b1e810bc62ac5"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Scrum%2Fvue-2-breadcrumbs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Scrum%2Fvue-2-breadcrumbs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Scrum%2Fvue-2-breadcrumbs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Scrum%2Fvue-2-breadcrumbs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Scrum","download_url":"https://codeload.github.com/Scrum/vue-2-breadcrumbs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247634329,"owners_count":20970510,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["breadcrumbs","vue2"],"created_at":"2024-10-01T15:13:34.801Z","updated_at":"2025-04-07T10:26:53.788Z","avatar_url":"https://github.com/Scrum.png","language":"TypeScript","funding_links":["https://paypal.me/scrumpay"],"categories":[],"sub_categories":[],"readme":"# \u003ca href=\"https://vuejs.org\" target=\"_blank\"\u003e\u003cimg valign=\"text-bottom\" height=\"49\" src=\"https://vuejs.org/images/logo.png\"\u003e\u003c/a\u003e breadcrumbs \n\u003e 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/)\n\n[![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)\n\n[![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\u0026style=flat)](https://www.npmjs.com/package/vue-2-breadcrumbs)\n\n## Support\n- Support Nuxjs ([example](https://github.com/Scrum/vue-2-breadcrumbs/tree/master/example/nuxtjs))\n- Support SSR\n- Setting parent route without need to actually nest it in children array\n- Customized template\n- Dynamic breadcrumbs \n- Dynamic parent \n- Dynamic label \n- Shorthand labeling (`breadcrumb: 'Page Label'`)\n- Sub-routing\n\n\n## Install\n\n```bash\n$ npm install vue-2-breadcrumbs\n```\n\n\u003e **Note:** This project is compatible with node v10+\n\n\n## Usage\n\n```js\nimport Vue from 'vue';\nimport VueBreadcrumbs from 'vue-2-breadcrumbs';\nimport App from './App.vue';\n\nVue.use(VueBreadcrumbs);\n```\n\u003e Note: After that `\u003cBreadcrumbs/\u003e` component would be at your disposal.\n\n## Meta in router\n```js\nimport Vue from 'vue';\nimport VueRouter from 'vue-router';\n\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n  routes: [\n    {\n      path: '/',\n      name: 'Home',\n      component: { template: '\u003ch2\u003eHome\u003c/h2\u003e' },\n      meta: {\n        breadcrumb: 'Home'\n      }\n    },\n    {\n      path: '/params',\n      name: 'Params',\n      component: { template: '\u003ch2\u003eParams\u003c/h2\u003e' },\n      meta: {\n        breadcrumb: routeParams =\u003e `route params id: ${routeParams.id}`\n      }\n    },\n    {\n      path: '/context',\n      name: 'Context',\n      component: { template: '\u003ch2\u003eContext\u003c/h2\u003e' },\n      meta: {\n        breadcrumb() {\n            const { name } = this.$route;\n            return `name \"${name}\" of context route`;\n        }\n      }\n    },\n    {\n      path: '/parent',\n      component: { template: '\u003crouter-view/\u003e' },\n      meta: {\n        breadcrumb: {\n          label: 'Parent to Params',\n          parent: 'Params'\n        }\n      },\n      {\n        name: 'dynamic-parent',\n        path: '/dynamic-parent',\n        component: { template: '\u003ch2\u003eDynamic Parent\u003c/h2\u003e' },\n        meta: {\n          breadcrumb() {\n            const { name } = this.$route;\n\n            return {\n              label: name,\n              parent: 'settings'\n            };\n          }\n        }\n    }\n  ]\n});\n```\n## Options\n\u003e An options object can also be passed into the plugin to specify your own template and rendering methods if desired. For example:\n\n```js\nimport Vue from 'vue';\nimport VueBreadcrumbs from 'vue-2-breadcrumbs';\n\nVue.use(VueBreadcrumbs, {\n  template:\n    '        \u003cnav v-if=\"$breadcrumbs.length\" aria-label=\"breadcrumb\"\u003e\\n' +\n    '            \u003col class=\"breadcrumb\"\u003e\\n' +\n    '                \u003cli v-for=\"(crumb, key) in $breadcrumbs\" v-if=\"crumb.meta.breadcrumb\" :key=\"key\" class=\"breadcrumb-item active\" aria-current=\"page\"\u003e\\n' +\n    '                    \u003crouter-link :to=\"{ path: getPath(crumb) }\"\u003e{{ getBreadcrumb(crumb.meta.breadcrumb) }}\u003c/router-link\u003e' +\n    '                \u003c/li\u003e\\n' +\n    '            \u003c/ol\u003e\\n' +\n    '        \u003c/nav\u003e'\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscrum%2Fvue-2-breadcrumbs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscrum%2Fvue-2-breadcrumbs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscrum%2Fvue-2-breadcrumbs/lists"}