{"id":19905177,"url":"https://github.com/ossphilippines/vue-footprints","last_synced_at":"2026-05-14T23:09:16.929Z","repository":{"id":65478443,"uuid":"593060116","full_name":"OSSPhilippines/vue-footprints","owner":"OSSPhilippines","description":"Breadcrumbs for Vue.js with Vue Router","archived":false,"fork":false,"pushed_at":"2023-05-11T11:21:54.000Z","size":147,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-12T07:02:00.351Z","etag":null,"topics":["breadcrumbs","vue","vue-router","vuejs"],"latest_commit_sha":null,"homepage":"https://vue-footprints.ossph.org","language":"JavaScript","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/OSSPhilippines.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2023-01-25T05:58:45.000Z","updated_at":"2023-05-12T00:53:46.000Z","dependencies_parsed_at":"2023-02-14T05:45:39.202Z","dependency_job_id":null,"html_url":"https://github.com/OSSPhilippines/vue-footprints","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/OSSPhilippines%2Fvue-footprints","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OSSPhilippines%2Fvue-footprints/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OSSPhilippines%2Fvue-footprints/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OSSPhilippines%2Fvue-footprints/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OSSPhilippines","download_url":"https://codeload.github.com/OSSPhilippines/vue-footprints/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241335516,"owners_count":19946068,"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","vue","vue-router","vuejs"],"created_at":"2024-11-12T20:31:53.059Z","updated_at":"2026-05-14T23:09:16.869Z","avatar_url":"https://github.com/OSSPhilippines.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Footprints 👣\n\nBreadcrumbs plugin for Vue.js \u0026 Vue Router. Why footprints? Coz it's similar to the idea of breadcrumbs. Also, there's already a bunch of packages that has \"breadcrumbs\" on their name.\n\n\u003e NOTE: This requires Vue Router to work.\n\n\u003e Is this compatible with Vue 2? I don't know, I haven't tried. It might tho, give it a try.\n\n## Installation\n\n**Yarn**\n\n```bash\nyarn add @ossph/vue-footprints\n```\n\n**NPM**\n\n```bash\nnpm install @ossph/vue-footprints\n```\n\n## Usage\n\n### Mixin\n\nThis will add a global computed mixin array called `$footprints`. Remember this one, we'll talk about it in the implmentation part.\n\n```js\nimport { createApp } from 'vue'\nimport { VueFootprintsMixin } from '@ossph/vue-footprints';\n\nconst app = createApp({});\n\napp.use(VueFootprintsMixin, { returnRoute: true });\n```\n\n### Composable\n\nYou can also create a local implementation using the composable version.\n\n```js\nimport { useRoute } from 'vue-router';\n\nexport default {\n  setup () {\n    const route = useRoute();\n    const { footprints } = useFootprints(route, { returnRoute: true });\n    // footprints.value yields an array of route footprints\n  },\n};\n```\n\n### Options\n\nBoth the mixin installation and the composable have the same options parameters.\n\n| Option | Type | Default | Description |\n| --- | --- | --- | --- |\n| `returnRoute` | `Boolean` | `false` | If `true`, the `route` object will be returned in the `footprints` array. |\n\n## Implementation with Vue App\n\n**Step 1**\n\nIn your Vue Router routes, add the object `footprint` in the `meta` object of each route that you want to be added to the footprints. Assumming that you have the routes below:\n\n```\n|- grandparent\n  |- parent\n    |- child 1\n    |- child 2\n```\n\n```diff\n...\n{\n  path: '/grandparent',\n  name: 'grandparent',\n  meta: {\n+    footprint: {\n+      name: 'Grandparent',\n+    },\n  },\n  component: () =\u003e import('pages/GrandParentPage'),\n  children: [\n    {\n      path: 'parent',\n      name: 'parent',\n      component: () =\u003e import('pages/ParentPage'),\n      meta: {\n+        footprint: {\n+          name: 'Parent',\n+        },\n      },\n      children: [\n        {\n          path: 'child-1',\n          name: 'child-1',\n          component: () =\u003e import('pages/ChildOnePage'),\n          meta: {\n+            footprint: {\n+              name: 'Child 1',\n+            },\n          },\n        },\n        {\n          path: 'child-2',\n          name: 'child-2',\n          component: () =\u003e import('pages/ChildTwoPage'),\n          meta: {\n+            footprint: {\n+              name: 'Child 2',\n+            },\n          },\n        },\n      ],\n    },\n  ],\n}\n```\n\n**Step 2**\n\nGiven the input above, the `$footprints` will look like this depending on how deep you are in the route history. Say you're just in the `/grandparent` it will look like:\n\n```js\n$footprints: [\n  {\n    footprint: {\n      name: 'Grandparent'\n    },\n    active: true,\n    route: {\n      name: 'grandparent',\n      path: '/grandparent'\n    }\n  }\n]\n```\n\nBut if you're in the `/grandparent/parent` it will look like:\n\n```js\n$footprints: [\n  {\n    footprint: {\n      name: 'Grandparent'\n    },\n    active: false,\n    route: {\n      name: 'grandparent',\n      path: '/grandparent'\n    }\n  },\n  {\n    footprint: {\n      name: 'Parent'\n    },\n    active: true,\n    route: {\n      name: 'parent',\n      path: '/grandparent/parent'\n    }\n  }\n]\n```\n\nAnd finally if you're in `/granparent/parent/child-1` it will look like:\n\n```js\n$footprints: [\n  {\n    footprint: {\n      name: 'Grandparent'\n    },\n    active: false,\n    route: {\n      name: 'grandparent',\n      path: '/grandparent'\n    }\n  },\n  {\n    footprint: {\n      name: 'Parent'\n    },\n    active: false,\n    route: {\n      name: 'parent',\n      path: '/grandparent/parent'\n    }\n  },\n  {\n    footprint: {\n      name: 'Child 1'\n    },\n    active: true,\n    route: {\n      name: 'child-1',\n      path: '/grandparent/parent/child-1'\n    }\n  }\n]\n```\n\n**Step 3**\n\nDo whatever you want with the `$footprints` object. In my case I made this for my quasar app so I used their [`QBreadcrumbs`](https://quasar.dev/vue-components/breadcrumbs) component.\n\n## API (Object structure)\n\n```js\n$footprints: [\n  {\n    // Whatever you put Route#meta.footer will appear here\n    footprint: Object,\n    // True if the this footprint is the active route. False, otherwise.\n    active: Boolean,\n    // The route object in case you want to use it.\n    // You can return everything or just the essential by\n    // passing returnRoute: true in the options. \n    // E.x. app.use(VueFootprints, { returnRoute: true });\n    route: Object,\n  }\n]\n```\n\n## Example\n\nThis is just a screenshot from my app, I don't have time create an example, sorry. If you have a question, join our [discord server](https://discord.com/invite/4ujGbRJyDN).\n\n\u003cimg src=\"./example.png\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fossphilippines%2Fvue-footprints","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fossphilippines%2Fvue-footprints","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fossphilippines%2Fvue-footprints/lists"}