← Back

lit-element-router

LitElement Router.

Author

Rating

Popularity

<100

LitElement Router

Name: lit-element-router
Availability: InStock
Author: hamedasemi

A simple and lightweight LitElement Router.

Installation

npm install lit-element-router --save

Usage

Working example

You can find a working project on StackBlitz https://stackblitz.com/edit/lit-element-router

Minimal

import { LitElement, html } from 'lit-element';
import { routerMixin } from 'lit-element-router';

class MyApp extends routerMixin(LitElement) {

    static get routes() {
        return [{
            name: 'home',
            pattern: '',
            data: { title: 'Home' }
        }, {
            name: 'info',
            pattern: 'info'
        }, {
            name: 'user',
            pattern: 'user/:id'
        }, {
            name: 'not-found',
            pattern: '*'
        }];
    }

    onRoute(route, params, query, data) {
        console.log(route, params, query, data)
    }
}

customElements.define('my-app', MyApp);

Complete Example Using JavaScript Mixins in Details

Dont like mixins check out other examples

Don't want to use mixins interface you cane use a simple version in this tutorial: https://github.com/hamedasemi/lit-element-router/blob/mainline/README_NOT_MIXIN.md

Make any arbitary components or elements to a router using router mixins method

import { LitElement, html } from 'lit-element';
import { routerMixin } from 'lit-element-router';

class MyApp extends routerMixin(LitElement) {

}

customElements.define('my-app', MyApp);

Register routes and the onRoute function

import { LitElement, html } from 'lit-element';
import { routerMixin } from 'lit-element-router';

class MyApp extends routerMixin(LitElement) {
    static get routes() {
        return [{
            name: 'home',
            pattern: ''
        }, {
            name: 'info',
            pattern: 'info'
        }, {
            name: 'user',
            pattern: 'user/:id'
        }, {
            name: 'not-found',
            pattern: '*'
        }];
    }

    onRoute(route, params, query, data) {
        this.route = route;
        this.params = params;
    }
}

customElements.define('my-app', MyApp);

Make any arbitary components or elements to a router outlet using router outlet mixins method

import { LitElement, html } from 'lit-element';
import { routerOutletMixin } from 'lit-element-router';

export class AnyArbitaryLitElement extends routerOutletMixin(LitElement) {
    
}

customElements.define('any-arbitary-lit-element', AnyArbitaryLitElement);

Put the components under router outlet

import { LitElement, html } from 'lit-element';
import { routerMixin } from 'lit-element-router';

class MyApp extends routerMixin(LitElement) {
    static get routes() {
        return [{
            name: 'home',
            pattern: ''
        }, {
            name: 'info',
            pattern: 'info'
        }, {
            name: 'user',
            pattern: 'user/:id'
        }, {
            name: 'not-found',
            pattern: '*'
        }];
    }

    onRoute(route, params, query, data) {
        this.route = route;
        this.params = params;
    }

    render() {
        return html`
            <any-arbitary-lit-element current-route='${this.route}'>
                <div route='home'>Home any-arbitary-lit-element</div>
                <div route='info'>mY Info any-arbitary-lit-element</div>
                <div route='user'>User ${this.params.id} any-arbitary-lit-element</div>
                <div route='not-authorized'>Not Authorized any-arbitary-lit-element</div>
                <div route='not-found'>Not Found any-arbitary-lit-element</div>
            </any-arbitary-lit-element>
        `;
}

customElements.define('my-app', MyApp);

Make any arbitary components or elements to a router link using router link mixins method

import { LitElement, html } from 'lit-element';
import { routerLinkMixin } from 'lit-element-router';

export class AnArbitaryLitElement extends routerLinkMixin(LitElement) {
    
}

customElements.define('an-arbitary-lit-element', AnArbitaryLitElement);

Navigate using the router navigate method

import { LitElement, html } from 'lit-element';
import { routerLinkMixin } from 'lit-element-router';

export class AnArbitaryLitElement extends routerLinkMixin(LitElement) {
    constructor() {
        super()
        this.href = ''
    }
    static get properties() {
        return {
            href: { type: String }
        }
    }
    render() {
        return html`
            <a href='${this.href}' @click='${this.linkClick}'><slot></slot></a>
        `
    }
    linkClick(event) {
        event.preventDefault();
        this.navigate(this.href);
    }
}

customElements.define('an-arbitary-lit-element', AnArbitaryLitElement);

Browsers support

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Samsung	Opera
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

lit-element#^2.0.1

Released: 2019-03-18
Maturity: IMPORTED
License: ISC License

Compatibility

Framework
Browser: Browser Independent

lit-element-router - Vaadin Add-on Directory

LitElement Router.

# LitElement Router A simple and lightweight LitElement Router. [![Coverage Status](https://coveralls.io/repos/github/hamedasemi/lit-element-router/badge.svg?branch=mainline)](https://coveralls.io/github/hamedasemi/lit-element-router?branch=mainline) [![npm version](https://badge.fury.io/js/lit-element-router.svg)](https://badge.fury.io/js/lit-element-router) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/lit-element-router) [![Known Vulnerabilities](https://snyk.io/test/github/hamedasemi/lit-element-router/badge.svg?targetFile=package.json)](https://snyk.io/test/github/hamedasemi/lit-element-router?targetFile=package.json) [![CircleCI](https://circleci.com/gh/hamedasemi/lit-element-router/tree/mainline.svg?style=svg)](https://circleci.com/gh/hamedasemi/lit-element-router/tree/mainline) ## Installation ```sh npm install lit-element-router --save ``` ## Usage ### Working example You can find a working project on StackBlitz https://stackblitz.com/edit/lit-element-router ### Minimal ```js import { LitElement, html } from 'lit-element'; import { routerMixin } from 'lit-element-router'; class MyApp extends routerMixin(LitElement) { static get routes() { return [{ name: 'home', pattern: '', data: { title: 'Home' } }, { name: 'info', pattern: 'info' }, { name: 'user', pattern: 'user/:id' }, { name: 'not-found', pattern: '*' }]; } onRoute(route, params, query, data) { console.log(route, params, query, data) } } customElements.define('my-app', MyApp); ``` # Complete Example Using JavaScript Mixins in Details ## Dont like mixins check out other examples Don't want to use mixins interface you cane use a simple version in this tutorial: https://github.com/hamedasemi/lit-element-router/blob/mainline/README_NOT_MIXIN.md ## Make any arbitary components or elements to a router using router mixins method ```javascript import { LitElement, html } from 'lit-element'; import { routerMixin } from 'lit-element-router'; class MyApp extends routerMixin(LitElement) { } customElements.define('my-app', MyApp); ``` ## Register routes and the onRoute function ```javascript import { LitElement, html } from 'lit-element'; import { routerMixin } from 'lit-element-router'; class MyApp extends routerMixin(LitElement) { static get routes() { return [{ name: 'home', pattern: '' }, { name: 'info', pattern: 'info' }, { name: 'user', pattern: 'user/:id' }, { name: 'not-found', pattern: '*' }]; } onRoute(route, params, query, data) { this.route = route; this.params = params; } } customElements.define('my-app', MyApp); ``` ## Make any arbitary components or elements to a router outlet using router outlet mixins method ```javascript import { LitElement, html } from 'lit-element'; import { routerOutletMixin } from 'lit-element-router'; export class AnyArbitaryLitElement extends routerOutletMixin(LitElement) { } customElements.define('any-arbitary-lit-element', AnyArbitaryLitElement); ``` ## Put the components under router outlet ```javascript import { LitElement, html } from 'lit-element'; import { routerMixin } from 'lit-element-router'; class MyApp extends routerMixin(LitElement) { static get routes() { return [{ name: 'home', pattern: '' }, { name: 'info', pattern: 'info' }, { name: 'user', pattern: 'user/:id' }, { name: 'not-found', pattern: '*' }]; } onRoute(route, params, query, data) { this.route = route; this.params = params; } render() { return html`

Home any-arbitary-lit-element

mY Info any-arbitary-lit-element

User ${this.params.id} any-arbitary-lit-element

Not Authorized any-arbitary-lit-element

Not Found any-arbitary-lit-element

`; } customElements.define('my-app', MyApp); ``` ## Make any arbitary components or elements to a router link using router link mixins method ```javascript import { LitElement, html } from 'lit-element'; import { routerLinkMixin } from 'lit-element-router'; export class AnArbitaryLitElement extends routerLinkMixin(LitElement) { } customElements.define('an-arbitary-lit-element', AnArbitaryLitElement); ``` ## Navigate using the router navigate method ```javascript import { LitElement, html } from 'lit-element'; import { routerLinkMixin } from 'lit-element-router'; export class AnArbitaryLitElement extends routerLinkMixin(LitElement) { constructor() { super() this.href = '' } static get properties() { return { href: { type: String } } } render() { return html` ` } linkClick(event) { event.preventDefault(); this.navigate(this.href); } } customElements.define('an-arbitary-lit-element', AnArbitaryLitElement); ``` ## Browsers support | [

](http://godban.github.io/browsers-support-badges/)
IE / Edge | [

](http://godban.github.io/browsers-support-badges/)
Firefox | [

](http://godban.github.io/browsers-support-badges/)
Chrome | [

](http://godban.github.io/browsers-support-badges/)
Safari | [

](http://godban.github.io/browsers-support-badges/)
iOS Safari | [

](http://godban.github.io/browsers-support-badges/)
Samsung | [

](http://godban.github.io/browsers-support-badges/)
Opera | | --------- | --------- | --------- | --------- | --------- | --------- | --------- | | IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions

View on NPM
View on GitHub

lit-element-router version 0.0.0-alpha.1
### Dependencies * lit-element#^2.0.1

lit-element-router version 0.0.0-alpha.2
### Dependencies * lit-element#^2.0.1

lit-element-router version 0.0.0-alpha.3
### Dependencies * lit-element#^2.0.1

lit-element-router version 1.0.0-alpha.0
### Dependencies * lit-element#^2.0.1

lit-element-router version 1.0.0-alpha.1
### Dependencies * lit-element#^2.0.1

lit-element-router version 1.0.0-alpha.2
### Dependencies * lit-element#^2.0.1

lit-element-router version 1.0.0-beta.0
### Dependencies * lit-element#^2.0.1

lit-element-router version 1.0.0
### Dependencies * lit-element#^2.0.1

lit-element-router version 1.1.0
### Dependencies * lit-element#^2.0.1

lit-element-router version 1.2.0
### Dependencies * lit-element#^2.0.1

lit-element-router version 1.2.1
### Dependencies * lit-element#^2.0.1