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:
- Small size (< 7kb).
- Framework agnostic.
- Map URLs to views based on WebComponents.
- Express-like syntax for routes.
- Implements all features you may expect from a router.
- Features include: Child route, Redirects, Callbacks, Lazy loading of views, Animate transitions, Route parameters, Route actions, and much more!
- 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', 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!