App Development

Guides

Opinionated guides for building Laioutr apps. Each guide captures one pattern, gotcha, or architectural decision that earned its keep in real apps.

The reference pages in this section explain what each app-development primitive does. The guides here are about how we use those primitives in real apps: the patterns that earned their keep, the architectural splits worth making early, and the dead ends we steered around. They assume you know the basics of section definitions, block definitions, and schema fields; if not, start with the linked reference pages first.

Separate schema components from UI components

The defineSection / defineBlock wrapper is one concern; the visual Vue component that paints pixels is another. Splitting them gives you a reusable UI component the rest of your app can use directly, plus a thin Studio-facing wrapper that only knows about schemas and props.

Section config standard

A canonical sidebar layout and field-naming convention for every section and block. Same ordering, same names everywhere, so editors learn one app and know them all.

How to write CSS

A short checklist for writing component CSS in a Laioutr app: BEM, the lui-components layer, data-attributes for runtime state, @media over useBreakpoints().

Shared field factories

When the same field shape appears in three or more sections, promote it to a factory function. The trick is keeping literal types intact so definitionToProps still produces narrow prop types.

Edit this pageorReport an issue

App Development

Overview of the Laioutr app development docs and how to use them.

Separate schema components from UI components

Split the Studio-facing schema wrapper (defineSection / defineBlock) from the visual Vue component that paints pixels. Two files, two responsibilities, fewer regressions.