Skip to content
Small and powerful client-side router for Web Components. Framework-agnostic.
HTML JavaScript TypeScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo fix: add a mass-ignore example to the docs Jan 9, 2020
docs chore(docs): regenerate /docs Jan 9, 2020
src 1.6.0 Dec 19, 2019
test feat: add router-ignore attribute to let the browser handle navigation ( Dec 18, 2019
.eslintignore Add lifecycle callbacks documentation, regenerate docs. (#154) Jun 11, 2018
.eslintrc.json Update README.md and docs for GitHub (#90) May 18, 2018
.gitignore update build scripts, tests, docs and demos May 17, 2018
.npmrc Restore yarn. Update to latest rollup, pin polymer-cli to 1.6.0 (#79) May 16, 2018
.stylelintrc create a new vaadin component based on the skeleton Mar 19, 2018
.travis.yml chore: fix travis build Sep 18, 2019
LICENSE create a new vaadin component based on the skeleton Mar 19, 2018
README.md Revert "remove vaadin-usage-statistics (#251)" Aug 7, 2018
analysis.json chore(docs): regenerate /docs Jan 9, 2020
bower.json Use Lumo styles for demo page content (#268) Sep 24, 2018
bs-config.js update demo descriptions, reorder tabs (#115) May 28, 2018
gen-tsd.json fix: render correctly if reusing the same instance or same tagName (#375 Aug 27, 2019
gulpfile.js fix: update the Router version in meta (#384) Sep 2, 2019
index.html consistently use 'Vaadin Router' as the product name (#252) Aug 6, 2018
index.js Use click navigation trigger by default (#96) May 21, 2018
index.polyfilled.js fix: Router.go string pathname parsing in IE (#401) Oct 4, 2019
interfaces.d.ts fix: events and detach/re-attach (#355, #361, #360, #311, #331) (#370) Aug 29, 2019
package.json 1.6.0 Dec 19, 2019
polymer.json update the build script for docs / demo (#5) Apr 3, 2018
rollup.config.js chore: update Babel and Rollup dev dependencies (#348) Aug 13, 2019
tsconfig.json chore(tsconfig): set skipLibCheck: true Dec 11, 2019
wct.conf.js test: update browser versions to fix build (#337) Jun 13, 2019
yarn.lock chore: update npm dependencies (#412) Dec 11, 2019

README.md

NPM version npm bundle size (minified + gzip) Build Status Gitter

Vaadin Router

Live Demo ↗ | API documentation ↗

router hero banner

A client-side router for Web Components

Vaadin Router is a small and powerful client-side router JS library. It uses the widely adopted express.js syntax for routes (/users/:id) to map URLs to Web Component views. All features one might expect from a modern router are supported: async route resolution, animated transitions, navigation guards, redirects, and more. It is framework-agnostic and works equally well with all Web Components regardless of how they are created (Polymer / SkateJS / Stencil / Angular / Vue / etc).

Vaadin Router is a good fit for developers that do not want to go all-in with one framework, and prefer to have freedom in picking the components that work best for their specific needs.

npm install --save @vaadin/router
import {Router} from '@vaadin/router';

const router = new Router(document.getElementById('outlet'));
router.setRoutes([
  {path: '/', component: 'x-home-view'},
  {path: '/users', component: 'x-user-list'}
]);

Browser support

Sauce Test Status

Big Thanks

Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs.

Running demos and tests in the browser

  1. Fork the vaadin-router repository and clone it locally.

  2. Make sure you have npm installed.

  3. When in the vaadin-router directory, run npm install and then npm run install:dependencies to install dependencies.

  4. Run npm start, and open http://127.0.0.1:8000/components/vaadin-router in your browser to see the component API documentation.

  5. You can also open demo or in-browser tests by adding demo or test to the URL, for example:

Running tests from the command line

  1. When in the vaadin-router directory, run npm test

Following the coding style

We are using ESLint for linting JavaScript code. You can check if your code is following our standards by running npm run lint, which will automatically lint all .js files as well as JavaScript snippets inside .html files.

Contributing

  • Make sure your code is compliant with our code linters: npm run lint
  • Check that tests are passing: npm test
  • Submit a pull request with detailed title and description
  • Wait for response from one of Vaadin components team members

License

Apache License 2.0

Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

You can’t perform that action at this time.