Vue lanes

Event-based routing system for Vue.js

Version: 0.1.0 Updated: 03/28/2014

By: bpierre License: MIT

Downloads Last 30 Days: 37


npm i vue-lanes
yarn add vue-lanes





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

Categories: Vue js