Lit UI Router

lit-ui-router / UIRouterLit

Class: UIRouterLit ​

Defined in: packages/lit-ui-router/src/core.ts:122

The main router class for Lit applications.

UIRouterLit extends the core UIRouter class from @uirouter/core, adding Lit-specific view handling and component integration.

Examples ​

Basic usage

ts
import { UIRouterLit, type LitStateDeclaration } from 'lit-ui-router';
import { hashLocationPlugin } from '@uirouter/core';
import { LitElement } from 'lit';

class HomeComponent extends LitElement {}

// Create router instance
const router = new UIRouterLit();

// Add a location plugin (hash-based or push state)
router.plugin(hashLocationPlugin);

// Register states
const states: LitStateDeclaration[] = [
  { name: 'home', url: '/home', component: HomeComponent },
];
states.forEach((state) => router.stateRegistry.register(state));

// Start the router
router.start();

With push state and base URL

ts
import { UIRouterLit } from 'lit-ui-router';
import { pushStateLocationPlugin } from '@uirouter/core';

const router = new UIRouterLit();
// Reads the base URL from the document's <base href="/app/"> tag
router.plugin(pushStateLocationPlugin);

router.start();

See ​

Extends ​

Constructors ​

Constructor ​

ts
new UIRouterLit(): UIRouterLit;

Defined in: packages/lit-ui-router/src/core.ts:131

Create a new UIRouterLit instance.

The constructor automatically:

  • Applies the services plugin for browser integration
  • Registers the Lit view config factory
  • Decorates the state registry with Lit-specific view building

Returns ​

UIRouterLit

Overrides ​

UIRouter.constructor

Methods ​

start() ​

ts
start(): void;

Defined in: packages/lit-ui-router/src/core.ts:161

Start the router and begin listening for URL changes.

This method initializes URL synchronization and begins processing state transitions based on the current URL.

Returns ​

void

Throws ​

If start() has already been called on this router instance

Example ​

ts
import { hashLocationPlugin } from '@uirouter/core';
import { UIRouterLit } from 'lit-ui-router';

const router = new UIRouterLit();
router.plugin(hashLocationPlugin);
// Register states...
router.start(); // Begin routing