Forms

@atscript/vue-form renders Vue 3 forms directly from an annotated .as type. You write the type once — labels, defaults, validation, layout, field components and submit text all flow from the same source of truth. No render boilerplate, no field-by-field wiring, no schema duplication between the form and the API contract that consumes it.

Mental model

The pipeline is three short steps:

.as type  →  FormDef  →  <AsForm>
 (source)    (parsed)    (rendered)

1. .as type. A normal atscript interface decorated with @meta.*, @expect.*, @ui.form.* and optionally @ui.form.fn.* (dynamic). See atscript.dev for the language; see Annotations for everything vue-form reads.

2. createAsFormDef(MyType). A one-liner that parses the type into a framework-agnostic FormDef (from @atscript/ui) and returns a reactive formData container shaped as { value: domainData }.

3. <AsForm :def :form-data :types @submit>. The Tier-1 component. It walks the FormDef and dispatches each field to a Vue component from the types map (defaults + your overrides).

Component tiers

Every component in vue-form lives in one of three tiers (see CLAUDE.md):

• Tier 1 — Primary. What users tag in templates: AsForm, AsField, AsIterator, and AsCollapsible (the auto-resolved section-chrome component for custom layouts). Auto-resolved by AsResolver().
• Tier 2 — Defaults. Swappable via :types or :components: AsInput, AsNumber, AsDecimal, AsSelect, AsRadio, AsCheckbox, AsDate, AsDatetime, AsTime, AsParagraph, AsAction, AsObject, AsArray, AsUnion, AsTuple, AsRef, AsFieldShell. Importable from @atscript/vue-form, not auto-imported.
• Tier 3 — Internals. Composition helpers. Not exported.

You will spend most of your time in Tier 1 + annotations. Reach for Tier 2 when you want to replace a default renderer; reach for the types map when you want to register a brand-new field type.

Where to go next

• Hello World — a full working form in 25 lines.
• Annotations — the authoritative reference for every @meta.*, @expect.*, @ui.form.* and @ui.form.fn.* key vue-form reads.
• Field Types — the default type map and how component resolution works.
• Validation — @expect.*, custom rules, external errors, fresh-field strategies.
• Arrays, Nested Objects, Unions, Tuples — structured fields.
• Dynamic Fields — @ui.form.fn.* JS expressions (requires @atscript/ui-fns).
• Grid Layout, Actions, References — layout, submit/server actions, FK pickers.
• Customization, Custom Components, Locale — make it yours.
• Collapsible Sections — wrap a custom component in AsObject's section chrome with your own header actions, and full-bleed section dividers to a padded card's edges (--as-inset).
• Aooth Components — pre-built field components for consent collection, password rules, QR-code enrolment, one-shot copy values and SSO/social-login provider picking, shipped by @atscript/vue-aooth.

Related ecosystem docs

The .as language, asc CLI, @meta.*, @expect.* and validators live in the atscript core docs. The @db.* annotations (FK, currency, units, precision) are covered in the atscript-db docs. vue-form reads several of them too — see References and Annotations.