lit-ui-router / LitStateDeclaration

Interface: LitStateDeclaration<T>

Defined in: packages/lit-ui-router/src/interface.ts:372

State declaration interface for Lit applications.

Extends the core StateDeclaration with Lit-specific component support. The component property accepts template functions, LitElement classes, or both.

Examples

{ name: 'home', url: '/', component: () => html`<h1>Home</h1>` }

{
  name: 'user',
  url: '/user/:id',
  component: (props) => html`<h1>User ${props?.transition?.params().id}</h1>`
}

{
  name: 'users',
  url: '/users',
  component: (props) => html`
    <ul>${props?.resolves?.users?.map(u => html`<li>${u.name}</li>`)}</ul>
  `,
  resolve: [{ token: 'users', resolveFn: () => fetch('/api/users').then(r => r.json()) }]
}

{ name: 'dashboard', url: '/dashboard', component: DashboardElement }

const states: LitStateDeclaration[] = [
  { name: 'app', abstract: true, component: AppShell },
  { name: 'app.home', url: '/home', component: () => html`<h1>Home</h1>` },
  { name: 'app.users', url: '/users', component: UsersView },
];

See

• StateDeclaration
• RoutedLitTemplate
• RoutedLitElement

Extends

• StateDeclaration

Type Parameters

Type Parameter	Default type
T extends DefaultResolvesType	DefaultResolvesType

Properties

Property	Type	Description	Defined in
component?	LitViewDeclaration<T>	The Lit component to render for this state	packages/lit-ui-router/src/interface.ts:376