Nuxt Auto Form
Build forms faster with tools you already know and love. Generate fully customizable Nuxt UI forms straight from your validation schemas.
<script setup lang="ts">
import * as z from 'zod'
const schema = z.object({
email: z.email(),
role: z.enum(['Developer', 'Designer', 'Founder']),
})
</script>
<template>
<AutoForm :schema="schema" />
</template>
Write 50-60% less code
AutoForm generates all the boilerplate for you.
Focus on your schema, not repetitive form code.
✓ With Nuxt Auto Form
16 lines<script setup lang="ts">
import * as z from 'zod'
const schema = z.object({
email: z.email(),
password: z.string().min(8),
})
function onSubmit(data: z.infer<typeof schema>) {
console.log(data)
}
</script>
<template>
<AutoForm :schema="schema" @submit="onSubmit" />
</template>
✗ Without Nuxt Auto Form
31 lines<script setup lang="ts">
import * as z from 'zod'
const schema = z.object({
email: z.email(),
password: z.string().min(8),
})
type Schema = z.output<typeof schema>
const state = reactive<Partial<Schema>>({
email: undefined,
password: undefined,
})
function onSubmit(data: Schema) {
console.log(data)
}
</script>
<template>
<UForm :schema="schema" :state="state" @submit="onSubmit">
<UFormField label="Email" name="email">
<UInput v-model="state.email" type="email" />
</UFormField>
<UFormField label="Password" name="password">
<UInput v-model="state.password" type="password" />
</UFormField>
<UButton type="submit">Submit</UButton>
</UForm>
</template>
Powerful features built-in
From modals to custom components, everything you need to build production-ready forms.
Modal Support
Built-in modal component for forms. Perfect for quick actions, confirmations, and data collection without leaving the page.
Contact Us
Click the button to open a modal form
<script setup lang="ts">
import * as z from 'zod'
const isOpen = ref(false)
const schema = z.object({
name: z.string().min(2, 'Name is required'),
email: z.string().email('Invalid email'),
message: z.string().min(10, 'Message must be at least 10 characters'),
})
function onSubmit(data: z.infer<typeof schema>) {
useToast().add({
title: 'Message sent!',
description: `Thank you ${data.name}, we'll be in touch soon.`,
color: 'success',
})
isOpen.value = false
}
</script>
<template>
<div class="space-y-4">
<div>
<h3 class="text-lg font-semibold mb-2">
Contact Us
</h3>
<p class="text-sm text-muted mb-4">
Click the button to open a modal form
</p>
</div>
<UButton size="lg" @click="isOpen = true">
Open Contact Form
</UButton>
<AutoFormModal
v-model:open="isOpen"
:schema="schema"
title="Get in Touch"
description="Send us a message and we'll respond as soon as possible."
@submit="onSubmit"
/>
</div>
</template>
Custom Input Components
Extend your forms with custom input components. Includes password toggle, clear button, and more out of the box.
Custom Input Components
Easily use custom components for enhanced UX
<script setup lang="ts">
import { AInputPasswordToggle, AInputWithClear } from '#components'
import * as z from 'zod'
const schema = z.object({
search: z.string()
.meta({
title: 'Search Query',
description: 'Clear button appears when typing',
input: {
component: AInputWithClear,
props: {
placeholder: 'Search for anything...',
icon: 'i-lucide-search',
},
},
}),
password: z.string()
.min(8, 'Password must be at least 8 characters')
.meta({
title: 'Password',
description: 'Toggle to show/hide password',
input: {
component: AInputPasswordToggle,
props: {
placeholder: 'Enter your password',
},
},
}),
})
</script>
<template>
<div class="space-y-4">
<div>
<h3 class="text-lg font-semibold mb-2">
Custom Input Components
</h3>
<p class="text-sm text-muted mb-4">
Easily use custom components for enhanced UX
</p>
</div>
<AutoForm :schema="schema" />
</div>
</template>
Save time. Write less. Build faster.
Technologies you love
Powered by Zod & Nuxt UI. Reduce your boilerplate in seconds, without complex rewrites.
Customizable
Easily customize buttons, inputs, and labels to style your forms exactly as you want.
Type-safe validation
Leverage Zod's powerful validation with full TypeScript support and auto-completion.
Flexible layouts
Use slots and custom components to build complex forms with ease.
Get started in seconds
Install the module and start building forms instantly.