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 } from 'lit-ui-router';
import { hashLocationPlugin } from '@uirouter/core';

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

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

// Register states
router.stateRegistry.register({
  name: 'home',
  url: '/home',
  component: HomeComponent
});

// 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();
router.plugin(pushStateLocationPlugin);

// Configure base URL for push state
router.urlService.config.baseHref('/app/');

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:158

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
const router = new UIRouterLit();
router.plugin(hashLocationPlugin);
// Register states...
router.start(); // Begin routing