Configure your LumenJS project with lumenjs.config.ts in your project root. Set the app title, enable integrations like Tailwind CSS, and configure i18n.
Create lumenjs.config.ts at the root of your project:
export default { title: 'My App', integrations: ['tailwind'], i18n: { locales: ['en', 'fr'], defaultLocale: 'en', prefixDefault: false, }, };
All fields are optional. If the file is missing, LumenJS uses sensible defaults.
| Option | Type | Default | Description |
|---|---|---|---|
title | string | 'LumenJS App' | App title used in the HTML <title> tag |
integrations | string[] | [] | Integrations to enable (see below) |
i18n | object | — | Internationalization settings (see i18n docs) |
| Option | Type | Default | Description |
|---|---|---|---|
locales | string[] | — | Supported locale codes (e.g. ['en', 'fr', 'ar']) |
defaultLocale | string | — | Fallback locale when none is detected |
prefixDefault | boolean | false | Whether to prefix URLs with the default locale (e.g. /en/about vs /about) |
prefixDefault is false, the default locale is served at /about while other locales use /fr/about. Set it to true to always include the locale prefix.
Integrations extend LumenJS with additional tooling. Add them to the integrations array or use the CLI:
lumenjs add tailwind
This installs the required packages, creates setup files, and updates lumenjs.config.ts automatically.
| Integration | What it does | Packages installed |
|---|---|---|
tailwind | Enables Tailwind CSS with the Vite plugin. Creates styles/tailwind.css. | tailwindcss, @tailwindcss/vite |
nuralyui | Auto-imports NuralyUI (<nr-*>) web components. No manual imports needed. | — |
After adding Tailwind, use utility classes in pages that render to the light DOM:
import { LitElement, html } from 'lit'; export class PageAbout extends LitElement { // Render to light DOM so Tailwind classes work createRenderRoot() { return this; } render() { return html` <div class="p-8 max-w-2xl mx-auto"> <h1 class="text-3xl font-bold">About</h1> </div> `; } }
createRenderRoot() to return this instead of using Shadow DOM. For components that need Shadow DOM encapsulation, use Lit's css tagged template instead.
LumenJS parses lumenjs.config.ts using regex, not dynamic imports. This keeps startup fast and avoids bundling issues. Keep the format simple:
// Good — simple object literal export default { title: 'My App', integrations: ['tailwind'], }; // Bad — dynamic values won't be detected const name = 'My App'; export default { title: name };
Running lumenjs build creates a .lumenjs/ directory in your project root:
Hashed assets in assets/ are served with immutable cache headers (1 year). Other static files use a 1-hour cache.
Serve the production build with:
lumenjs build --project ./my-app lumenjs serve --project ./my-app --port 3000