{"id":15019554,"url":"https://github.com/softchef/vuejs2-breadcrumbs","last_synced_at":"2025-10-24T12:31:30.265Z","repository":{"id":49520010,"uuid":"147491880","full_name":"SoftChef/vuejs2-breadcrumbs","owner":"SoftChef","description":"Vuejs breadcrumbs","archived":false,"fork":false,"pushed_at":"2021-06-16T01:30:13.000Z","size":1188,"stargazers_count":3,"open_issues_count":9,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-31T01:16:50.965Z","etag":null,"topics":["breadcrumbs","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SoftChef.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-05T09:17:32.000Z","updated_at":"2021-06-22T03:16:52.000Z","dependencies_parsed_at":"2022-08-29T10:11:54.199Z","dependency_job_id":null,"html_url":"https://github.com/SoftChef/vuejs2-breadcrumbs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SoftChef%2Fvuejs2-breadcrumbs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SoftChef%2Fvuejs2-breadcrumbs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SoftChef%2Fvuejs2-breadcrumbs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SoftChef%2Fvuejs2-breadcrumbs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SoftChef","download_url":"https://codeload.github.com/SoftChef/vuejs2-breadcrumbs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237964684,"owners_count":19394446,"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","vuejs"],"created_at":"2024-09-24T19:53:41.324Z","updated_at":"2025-10-24T12:31:24.955Z","avatar_url":"https://github.com/SoftChef.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vuejs2-breadcrumbs\n\n## Installation\n\nInstall via NPM\n```\n$ npm install vuejs2-breadcrumbs\n```\n...and require the plugin like so:\n\n```\nimport VueBreadcrumbs from 'vuejs2-breadcrumbs'\n\nVue.use(VueBreadcrumbs)\n```\n\n### Options\n\n```\nlet options = {}\n\n// Customize element name\noptions.name = 'app-breadcrumbs'\n\n// Customize template\noptions.template = VueCompoent || '\u003ctemplate\u003e...\u003c/template\u003e'\n\n// You can register breadcrumbs in options, or also can use VueBreadcrumbs.register(name, callback)\noptions.breadcrumbs = {\n    home() {\n         return {\n              parent: null,\n              links: [\n                  {\n                      text: 'Home',\n                      to: {\n                          name: 'home'  // use for vue-router\n                      }\n                  }\n              ]\n         }\n    }\n}\n\nVue.use(VueBreadcrumbs, options)\n```\n\n## Register\n\n```\nVueBreadcrumbs.register(name, callback)\n```\n\nRegister the \"Root\" node\n```\nVueBreadcrumbs.register('home', () =\u003e {\n     return {\n          parent: null,\n          links: [\n              {\n                  text: 'Home',\n                  to: {\n                      name: 'home'  // use for vue-router\n                  }\n              }\n          ]\n     }\n})\n```\n\nRegister children node under \"Root\"\n```\nVueBreadcrumbs.register('users', () =\u003e {\n     return {\n          parent: 'home',\n          links: [\n              {\n                  text: 'Users',\n                  to: {\n                      name: 'users'  // use for vue-router\n                  }\n              }\n          ]\n     }\n})\n\n```\n\nRegister leaf node under \"users\" and with parameters\n```\nVueBreadcrumbs.register('user.profile', ({ user }) =\u003e {\n     return {\n          parent: 'users',\n          links: [\n              {\n                  text: `User: ${user.name}`,\n                  to: {\n                      name: 'user.profile',  // use for vue-router\n                      params: {\n                          user_id: user.id\n                      }\n                  }\n              }\n          ]\n     }\n})\n```\n\n## Display\n\n\u003e Breadcrumbs will auto match the route name, if you have register.\n\nCommon\n```\n\u003cbreadcrumbs /\u003e\n```\n\nWith your parameters\n```\n\u003cbreadcrumbs :params=\"{ user: { id: 1, name: 'User1' } }\" /\u003e\n```\n\n## this.$breadcrumbs(register_name, params)\n\nYou can use ```this.$breadcrumbs``` to get the nodes by name and parameters\n```\nexport default {\n    data() {\n        return {\n            user: {\n                id: 1,\n                name: 'User1'\n            }\n        }\n    },\n    mounted() {\n        let nodes = this.$breadcrumbs('user.profile', user)\n        // Display nodes by self\n    }\n}\n```\n\n## Customize Template\n\nSample - Use on Vuetify design\n```\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cv-breadcrumbs :divider=\"divider\" v-if=\"nodes\"\u003e\n            \u003cv-breadcrumbs-item v-for=\"(node, index) in nodes\" :key=\"node.text\" :to=\"node.to\" :disabled=\"index === nodes.length\"\u003e\n                {{ node.text }}\n            \u003c/v-breadcrumbs-item\u003e\n        \u003c/v-breadcrumbs\u003e\n        \u003cv-divider class=\"mb-4\"\u003e\u003c/v-divider\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n    export default {\n        props: [\n            'params',\n            'divider',\n            'current_route'\n        ],\n        computed: {\n            nodes() {\n                const breadcrumb_name = this.current_route || this.$route.name\n                if (breadcrumb_name) {\n                    // this.$breadcrumbs() can get the nodes by name and parameters\n                    return this.$breadcrumbs(breadcrumb_name, this.params)\n                } else {\n                    return []\n                }\n            }\n        }\n    }\n\u003c/script\u003e\n```\n\n\n## License\n\nThis SDK is distributed under the GNU GENERAL PUBLIC LICENSE Version 3, see LICENSE for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoftchef%2Fvuejs2-breadcrumbs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoftchef%2Fvuejs2-breadcrumbs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoftchef%2Fvuejs2-breadcrumbs/lists"}