🙌🏽 Attaform

A type-safe, schema-driven form library for Vue 3 and Nuxt with first-class Zod support.

Hand a Zod schema to useForm and Attaform turns it into a reactive form, typed end-to-end, with live errors and SSR out of the box.

It scales from the simplest forms to the most comprehensive multistep wizards while keeping the core experience clear and focused.

Because Vue and Nuxt devs deserve nice things, too.

Try it live → Tweak a schema, edit the template, and watch the form rebind in your browser. No install needed.

npm install attaform zod

<script setup lang="ts">
  import { useForm } from 'attaform'
  import { z } from 'zod'

  const schema = z.object({
    email: z.email('Enter a valid email'),
    password: z.string().min(8, 'At least 8 characters'),
  })

  const form = useForm({ schema })

  const onSubmit = form.handleSubmit(async (values) => {
    await fetch('/api/sign-in', { method: 'POST', body: JSON.stringify(values) })
  })
</script>

<template>
  <form @submit="onSubmit">
    <label>
      Email
      <input v-register="form.register('email')" autocomplete="email" />
      <em v-if="form.fields.email.showErrors">{{ form.fields.email.firstError?.message }}</em>
    </label>
    <label>
      Password
      <input v-register="form.register('password')" type="password" autocomplete="off" />
      <em v-if="form.fields.password.showErrors">{{ form.fields.password.firstError?.message }}</em>
    </label>
    <button :disabled="form.meta.submitting" type="submit">Sign in</button>
  </form>
</template>

Hand the schema to useForm, bind each input with v-register, and Attaform owns the values, the coercion, the live errors, and the typed submit payload. That is the whole loop.

Full walkthrough → Setting up Nuxt, Vite, or bare Vue? See the installation guide.

• The schema is the form. Types, defaults, validation, per-field errors, and the submit payload all flow from one Zod schema. No any, no manual type plumbing, on both Zod v3 and v4 from a single attaform/zod import. Why Attaform →
• useForm is the core. A reactive, fully typed form: read form.values, form.errors, form.fields, and form.meta directly, then write with form.setValue, form.reset, and typed field-array helpers. The form →
• useWizard for multistep. Compose forms into a flow with shared navigation, per-step validation, state retained across steps, and deep-link restore. useWizard →
• SSR-native. Server-rendered HTML matches the hydrated client with no flash. Auto-wired in Nuxt, one Vite plugin for bare Vue. SSR in Nuxt →
• DevTools built in. Inspect every form on the page, walk its history, and edit values live. No probes to install. DevTools panel →
• Built for AI-assisted coding. Ships an llms.txt index, a full-text docs dump, and an installable Agent Skill (npx attaform skill), so your coding assistant writes idiomatic Attaform the first time. AI agents →
• Secure by construction. Zero runtime dependencies (no supply-chain surface), prototype-pollution-safe deep writes, and Attaform never throws into your app. Security policy →

Full docs live at attaform.dev.

• Quick start: schema, form, submit, in one page.
• Installation: Vue, Nuxt, and Vite setup.
• Entry points: every public export, grouped by subpath.
• Performance: how it scales, when to worry.
• Troubleshooting: common gotchas and fixes.
• AI agents: llms.txt, the full-text docs dump, and an installable skill for coding assistants.
• Changelog: full release history.

Pre-1.0. SemVer applies from v1.0 onward; 0.x minor bumps may still include breaking changes, each documented in the changelog.

Found a vulnerability? Please report it privately through the security policy.

© 2026 Oswald Chisala. Released under the MIT License.