{"id":13423941,"url":"https://github.com/bpierre/vue-lanes","last_synced_at":"2025-06-14T18:11:11.648Z","repository":{"id":14792474,"uuid":"17514514","full_name":"bpierre/vue-lanes","owner":"bpierre","description":"Event-based routing system for Vue.js.","archived":false,"fork":false,"pushed_at":"2019-02-13T17:19:30.000Z","size":62,"stargazers_count":20,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-13T10:56:12.122Z","etag":null,"topics":[],"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/bpierre.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":"2014-03-07T13:18:01.000Z","updated_at":"2023-05-30T14:53:54.000Z","dependencies_parsed_at":"2022-08-19T14:00:47.542Z","dependency_job_id":null,"html_url":"https://github.com/bpierre/vue-lanes","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/bpierre/vue-lanes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Fvue-lanes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Fvue-lanes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Fvue-lanes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Fvue-lanes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bpierre","download_url":"https://codeload.github.com/bpierre/vue-lanes/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Fvue-lanes/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259860438,"owners_count":22922990,"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":[],"created_at":"2024-07-31T00:00:45.344Z","updated_at":"2025-06-14T18:11:11.611Z","avatar_url":"https://github.com/bpierre.png","language":"JavaScript","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Awesome Vue.js"],"sub_categories":["Libraries \u0026 Plugins"],"readme":"# Vue Lanes [![Build Status](https://travis-ci.org/bpierre/vue-lanes.png?branch=master)](https://travis-ci.org/bpierre/vue-lanes)\n\nEvent-based routing system for [Vue.js](http://vuejs.org).\n\n\u003cp align=\"center\"\u003e\u003cimg width=\"958\" height=\"315\" alt=\"vue-lanes illustration\" src=\"http://scri.ch/luh-2x.png\"\u003e\u003c/p\u003e\n\n\n## Example\n\nVue Lanes need to be initialized first. The `Lanes` extended Vue will let you create _Vue Lanes_ components, or can be directly instantiated.\n\nSee the [example](example) directory for a more complete example.\n\n```js\nvar Vue = require('vue');\nvar vueLanes = require('vue-lanes');\n\nvar Lanes = vueLanes(Vue, {\n\n  prefix: '!/', // The path prefix\n\n  routes: function(route) {\n    \n    // Add routes with the route() function\n    route(\n      'index', // Route name\n      /^$/ // Route regex\n    );\n\n    // Use capturing groups to retrieve parameters\n    route('search', /^search\\/(.+)$/);\n  }\n});\n\nvar app = new Lanes({\n\n  created: function() {\n\n    // The lanes:route event will be emitted each time the route has changed\n    this.$on('lanes:route', function(route) {\n      // do something\n    });\n\n  },\n  components: {\n    search: Lanes.extend({\n      data: { query: '' },\n      created: function() {\n\n        // Dispatch the lanes:path event to the root VM to change the path,\n        // which will automatically change the current route\n        this.$watch('query', function(query) {\n          this.$dispatch('lanes:path', 'search/' + query);\n        });\n\n        // The lanes:update:search event is broadcasted from the root Lanes Vue.\n        // You can safely use it to update your value, even if it’s watched,\n        // because Vue Lanes will prevent infinite loops in most cases.\n        this.$on('lanes:update:search', function(route) {\n          this.query = route.params[0];\n        });\n\n        // The lanes:route event is broadcasted each time a new route is set.\n        this.$on('lanes:route', function(route) {\n          // This function will be called on every route change.\n        });\n      }\n    })\n  }\n});\n```\n\n## Installation\n\n```\n$ npm install vue-lanes\n```\n\n## Events\n\nInside a `Lanes` extended Vue, you can _listen_ for the `lanes:route` event, and _dispatch_ a `lanes:path` event to change the path.\n\nIf you are interested by a specific route, you can _listen_ for the `lanes:update:\u003croute_name\u003e` and `lanes:leave:{route_name}` events.\n\n### lanes:route\n\nThe `lanes:route` event will send a `route` paramater, which is the route object provided by [miniroutes](https://github.com/bpierre/miniroutes).\n\n### lanes:update:{route_name}\n\nWhere `{route_name}` is the name of a registered route.\n\nThe `lanes:update:{route_name}` acts exactly as the `lanes:route` event, except it is for a specific route. This is useful if you want to do something when a specific route is active.\n\n### lanes:leave:{route_name}\n\nWhere `{route_name}` is the name of a registered route.\n\nThe `lanes:leave:{route_name}` is triggered everytime another route is set. This event is not triggered if a route is just updated (different path).\n\n### lanes:path\n\nThe `lanes:path` event must be dispatched from a Vue Lanes instance in order to update the path. The root _Vue Lanes_ instance will then broadcast a `lanes:route`.\n\n## TODO\n\n- Add an `history.pushState` mode.\n\n## Browser compatibility\n\nIE9+ and modern browsers.\n\n[![Browser support](https://ci.testling.com/bpierre/vue-lanes.png)](https://ci.testling.com/bpierre/vue-lanes)\n\n## License\n\n[MIT](http://pierre.mit-license.org/)\n\n## Special thanks\n\nIllustration made by [Raphaël Bastide](http://raphaelbastide.com/) with [scri.ch](http://scri.ch/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbpierre%2Fvue-lanes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbpierre%2Fvue-lanes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbpierre%2Fvue-lanes/lists"}