# Nuxt Forms

> Form handling with XForm component and useFormBuilder. Use when creating forms, handling validation errors, managing form state, or building form-based slideovers and modals.

- Skill: `majiayu000/nuxt-forms` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/nuxt-forms`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/nuxt-forms/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/nuxt-forms

---


# Nuxt Forms

Form handling with XForm component and validation error display.

## Core Concepts

**[forms.md](references/forms.md)** - XForm, useFormBuilder, validation patterns

## XForm Component

```vue
<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

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

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

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

## Validation Errors

```typescript
// 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')">
```