Accessibility Now
Join our upcoming webinar about building accessible web applications! June 7, 2022.
Blog

Framework Agnostic Router for Web Components

By  
A.Mahdy AbdelAziz
·
On Aug 20, 2018 9:30:00 AM
·

Vaadin is happy to announce the first release of its free open source client-side router to use with WebComponents.

Yet another JS router? In order to build applications of web components, you need a router. None of the existing routers fulfilled our needs, so we set out to build one. It comes with these key features:

  1. Small size (< 7kb).
  2. Framework agnostic.
  3. Map URLs to views based on WebComponents.
  4. Express-like syntax for routes.
  5. Implements all features you may expect from a router.
  6. Features include: Child route, Redirects, Callbacks, Lazy loading of views, Animate transitions, Route parameters, Route actions, and much more!
  7. Did I mention that it’s free and open source?

Getting started is easy, Vaadin Router is available as a node module that you can install using npm or yarn.

  $ npm install --save @vaadin/router

And you are ready to go!

You can initialize the router by assigning the region of the DOM where views should be rendered (e.g. a div called outlet):

  import {Router} from '@vaadin/router';
	const outlet = document.getElementById('outlet');
	const router = new Router(outlet);

You can also import it using JS script syntax in e.g. your index page.

Then, set the routing rules of your views:

  router.setRoutes([
    {path: '/', component: 'x-home-view'},
    {path: '/users', &nbsp;component: 'x-user-list'},
    {path: '/users/:user', component: 'x-user-profile'},
   {path: '(.*)', component: 'x-not-found-view'},
  ]);

path is the one you will mostly use, but other parameters could be: children, bundle, component, animate, and action.

Learn more about Vaadin Router and check out the getting started demos, as well as this step by step simple app. The github page is welcoming all your feedback, as well, so keep it coming!

A.Mahdy AbdelAziz
AMahdy is an international technical speaker, Google developer expert (GDE), trainer and developer advocate. Passionate about Web and Mobile apps development, including PWA, offline-first design, in-browser database, and cross platform tools. Also interested in Android internals such as building custom ROMs and customize AOSP for embedded devices. AMahdy.net
Other posts by A.Mahdy AbdelAziz