Attaform
DocsDemos GitHub

Getting started

  • Introduction
  • Why Attaform
  • Installation
  • Quick start
  • Your first schema
  • From schema to inputs
  • From inputs to submit
  • Demos

Schemas

  • The schema contract
  • Defaults from the schema
  • How values are stored
  • Optional, nullable, defaulted
  • Discriminated unions
  • Arrays & tuples
  • Records & maps
  • Nested objects
  • AbstractSchema

Reading the form

  • The form
  • values
  • fields
  • list
  • record
  • errors
  • meta
  • toRef
  • Type safety

Binding inputs

  • The v-register directive
  • useRegister
  • Text, number, textarea
  • Checkbox
  • Radio groups
  • Select & multi-select
  • File inputs
  • Advanced binding patterns
  • Modifiers
  • Register transforms
  • Schema-driven coercion
  • Custom assigners

Writing & mutating

  • setValue patterns
  • reset & resetField
  • clear & blank values
  • unset
  • Field-array mutations
  • Variant memory

Validation

  • When validation runs
  • Per-field validation
  • Async refinements
  • URL availability check
  • The validation lifecycle
  • Display state and showing errors
  • The blank field-state bit

Submitting

  • handleSubmit
  • Server-side errors
  • Focus & scroll on invalid submit

Persistence

  • Persistence overview
  • Storage backends
  • Per-field opt-in
  • Sensitive-name protection
  • Imperative persistence
  • Edge cases & hydration

Cross-cutting state

  • Undo & redo
  • Multi-tab sync
  • injectForm
  • App-wide defaults

Multistep flows

  • useWizard
  • injectWizard
  • Step slots
  • Statuses
  • Aggregates
  • handleSubmit
  • URL sync
  • Patterns

Server & SSR

  • SSR hydration: Nuxt
  • SSR hydration: bare Vue
  • Parsing API errors
  • Performance

DevTools & debugging

  • The Attaform DevTools panel
  • Vue DevTools integration
  • Troubleshooting

Reference

  • Types reference
  • Errors reference
  • Entry-point reference
DocsGetting startedDemos

Live editors

Demos

Play with Attaform. Experiment, tweak the schema, try things out. Every editor ships with attaform pre-bundled and a live preview that updates as you type.

Play with Attaform

Blank playground

Roll up your sleeves and start tweaking. A minimal form, a live preview that re-renders on each keystroke. Try anything, see what happens.

arrays-and-tuplesArrays And Tuples Open playground async-refinementsAsync Refinements Open playground blank-field-stateBlank Field State Open playground checkboxCheckbox Open playground clearClear Open playground coercionCoercion Open playground container-display-stateContainer Display State Open playground custom-assignersCustom Assigners Open playground defaults-async-factoryDefaults Async Factory Open playground defaults-sync-factoryDefaults Sync Factory Open playground discriminated-unionsDiscriminated Unions Open playground display-stateDisplay State Open playground errorsErrors Open playground field-arraysField Arrays Open playground fieldsFields Open playground

Showing 1–15 of 61 demos

Previous From inputs to submit Next The schema contract
Attaform

A type-safe, Zod-first form library for Vue 3 and Nuxt.

v0.21.2 · MIT

Resources

  • Documentation
  • Demos
  • API reference

Community

  • GitHub
  • npm
  • Issues

Project

  • Changelog
  • Releases
  • License

© 2026Oswald Chisala·MIT License

Made with·Built withVue+Nuxt