How to create Routing with Lit Library

#lit #javascript #components #nelsoncode

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/router

import { 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>
    <div id="app"></div>
  </body>
</html>