Create _layout.ts in any directory to wrap all pages in that directory and its subdirectories.
When visiting /dashboard/settings, the layout chain is:
layout-root → layout-dashboard → page-dashboard-settings
A layout is a Lit component that uses <slot> to render child content:
// pages/_layout.ts export class RootLayout extends LitElement { render() { return html` <header>My App</header> <main><slot></slot></main> <footer>Footer</footer> `; } }
Layout tags are derived from their directory path:
pages/_layout.ts → layout-root pages/dashboard/_layout.ts → layout-dashboard pages/app/admin/_layout.ts → layout-app-admin
Layouts can export a loader() function just like pages. Useful for auth guards or shared data:
// pages/dashboard/_layout.ts export async function loader({ headers }) { const user = await getUser(headers.authorization); if (!user) return redirect('/login'); return { user }; } export class DashboardLayout extends LitElement { static properties = { user: { type: Object } }; user: any = null; render() { return html` <nav>Welcome, ${this.user?.name}</nav> <slot></slot> `; } }