Nuxt Forms

Nuxt Forms

Form handling with XForm component and validation error display.

Core Concepts

forms.md - XForm, useFormBuilder, validation patterns (admin / SaaS app)

marketing-forms.md - Public multi-step forms without XForm: Zod schemas shared between client + server (shared/utils/), Turnstile invisible-mode + token-await, honeypot + IP rate limiting, the UForm submit-button gotcha (template-ref trigger), chip-toggle component pattern

XForm Component

<XForm
  ref="formRef"
  url="/api/posts"
  method="POST"
  :data="formData"
  :waiting="waitingFor.posts.creating"
  @submit="onSubmit"
  @success="onSuccess"
  @error="onError"
>
  <UFormField label="Title" name="title" :error="form?.errors.first('title')">
    <UInput v-model="formData.title" />
  </UFormField>

  <template #actions>
    <UButton type="submit" label="Create" :loading="form?.processing" />
  </template>
</XForm>

Form Data Pattern

const formData = ref<CreatePostData>({
  title: '',
  content: '',
  authorId: '',
  isDraft: true,
})

const (data: CreatePostData) => {
  await createPostAction(data)
}

const => {
  emits('close', true)
}

Validation Errors

// Access errors
form.errors.has('title')       // boolean
form.errors.first('title')     // string | undefined
form.errors.get('title')       // string[] | undefined
form.errors.any()              // boolean

// Display in template
<UFormField label="Title" name="title" :error="form?.errors.first('title')">