Application router

Nue application router is an extremely small script (2K minzipped) that enables client-side navigation and standards-based state management for your single-page applications.


App router is imported to your components as follows:

import { router } from '/@nue/app-router.js'

Routing API

Routing API is inspired by TJ Holowaychuk's awesome page.js

on(path, callback)

Defines a route mapping from the path to the given callback function. The callback is invoked by the data grabbed from the path. Examples:

on('/users/:id', user =>
on('/:view/:id', data =>,


Navigate to the given path

start({ path, root })

Start the router by triggering the registered handlers with the current URL on location.pathname.

This method should be called after registering the handlers with the on method.

State management API

Nue application router stores the state of the browser URL and its query string. Two reasons:

  1. URLs are shareable — You can copy/paste URLs and share the state with other people. Documenting, sharing, and reproducing page states becomes trivial.

  2. Standards-based The browser URL is a logical place to store the global application state using the standard History.replaceState() call.

  3. Routing and state management become a one, simple, and unified concept. No need to spend time learning multiple tools and clutter your code with large amounts of boilerplate code.


A property to access all the URL data. For example and URL such as this one


Would return

  view: 'customers',
  sidebar: 'opened',
  sort: 'total',
  limit: 10,
  id: 30,

When the the router was configured with: start({ path: '/:view/:id' })

set(key, val)

Set a new value for a given key. Update the query string accordingly and the updated state is available via .data. For example:

set('sort', 'date')
set('limit', 30)

After the above calls, the .data getter would return { sort: 'date', limit: 30 }