How to create Routing with Lit Library

In this example we will see how to add a router with vaadin router

Vaadin router

A small, powerful and framework-agnostic client-side router for Web Components

npm i @vaadin/routerimport { html, LitElement } from "lit";export class Home extends LitElement {
constructor() {
super();
}
render() {
return html`<div>
<h1>Home</h1>
</div>`;
}
}
customElements.define("my-home", Home);

main.js

import { Router } from "@vaadin/router";function initRouter() {
const router = new Router(document.querySelector("#app"));
router.setRoutes([
{
path: "/",
component: "my-home",
action: () => import("./pages/Home")
},
{
path: "/about",
component: "my-about",
action: () => import("./pages/About"),
},
]);
}
window.addEventListener("load", () => initRouter());<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Lit App</title>
<script type="module" src="src/main.js"></script>
</head>
<body>
<my-navbar></my-navbar>
<div id="app"></div>
</body>
</html>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store