Event-based routing system for Vue.js
Last updated 7 years ago by bpierre .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-lanes 
SYNC missed versions from official npm registry.

Vue Lanes Build Status

Event-based routing system for Vue.js.

vue-lanes illustration


Vue Lanes need to be initialized first. The Lanes extended Vue will let you create Vue Lanes components, or can be directly instantiated.

See the example directory for a more complete example.

var Vue = require('vue');
var vueLanes = require('vue-lanes');

var Lanes = vueLanes(Vue, {

  prefix: '!/', // The path prefix

  routes: function(route) {
    // Add routes with the route() function
      'index', // Route name
      /^$/ // Route regex

    // Use capturing groups to retrieve parameters
    route('search', /^search\/(.+)$/);

var app = new Lanes({

  created: function() {

    // The lanes:route event will be emitted each time the route has changed
    this.$on('lanes:route', function(route) {
      // do something

  components: {
    search: Lanes.extend({
      data: { query: '' },
      created: function() {

        // Dispatch the lanes:path event to the root VM to change the path,
        // which will automatically change the current route
        this.$watch('query', function(query) {
          this.$dispatch('lanes:path', 'search/' + query);

        // The lanes:update:search event is broadcasted from the root Lanes Vue.
        // You can safely use it to update your value, even if it’s watched,
        // because Vue Lanes will prevent infinite loops in most cases.
        this.$on('lanes:update:search', function(route) {
          this.query = route.params[0];

        // The lanes:route event is broadcasted each time a new route is set.
        this.$on('lanes:route', function(route) {
          // This function will be called on every route change.


$ npm install vue-lanes


Inside a Lanes extended Vue, you can listen for the lanes:route event, and dispatch a lanes:path event to change the path.

If you are interested by a specific route, you can listen for the lanes:update:<route_name> and lanes:leave:<route_name> events.


The lanes:route event will send a route paramater, which is the route object provided by miniroutes.


Where <route_name> is the name of a registered route.

The 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.


Where <route_name> is the name of a registered route.

The lanes:leave:<route_name> is triggered everytime another route is set. This event is not triggered if a route is just updated (different path).


The 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.


  • Add an history.pushState mode.

Browser compatibility

IE9+ and modern browsers.

Browser support



Special thanks

Illustration made by Raphaël Bastide with

Current Tags

  • 0.1.0                                ...           latest (7 years ago)

5 Versions

  • 0.1.0                                ...           7 years ago
  • 0.0.3                                ...           7 years ago
  • 0.0.2                                ...           7 years ago
  • 0.0.1                                ...           7 years ago
  • 0.0.0                                ...           7 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (2)
Dev Dependencies (7)
Dependents (0)

Copyright 2014 - 2016 © |