nuxt-x-auth
Form
Low-level schema-driven auth form — renders fields, OAuth provider buttons, and a submit button from declarative props; used internally by all auth page components.
Form
The XAuthForm component is the low-level form renderer used internally by all auth page components. It takes a declarative list of fields, an optional Zod schema, and optional OAuth providers, and renders the matching inputs (email/text, password with visibility toggle, OTP pin input) inside a Nuxt UI UForm. Use it when building a custom auth page that doesn't fit the pre-built components.
Components
<XAuthForm />
<script setup>
import { z } from 'zod'
const schema = z.object({ email: z.string().email() })
const fields = [
{ name: 'email', label: 'Email', type: 'email', placeholder: 'you@example.com', required: true },
]
</script>
<template>
<XAuthForm
title="Sign in"
icon="i-lucide-lock"
:fields="fields"
:schema="schema"
:submit="{ label: 'Continue' }"
@submit="onSubmit"
/>
</template>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon | string | — | Icon shown above the title (e.g. 'i-lucide-lock') |
title | string | — | Heading displayed above the form |
description | string | — | Subheading below the title (overridden by the description slot) |
fields | Array | [] | Field definitions — { name, label, type, placeholder, required, length? }. type is 'email' | 'text' | 'password' | 'otp'; length sets the OTP pin count (default 6) |
providers | Array | — | OAuth buttons rendered above the form — { label, icon, onClick } |
separator | string | — | Label for the separator between provider buttons and the form (e.g. 'or') |
submit | { label: string } | { label: 'Continue' } | Submit button label |
schema | object | — | Zod schema passed to UForm for validation |
loading | boolean | false | Disables inputs and shows a loading state on the submit button |
Events
| Event | Payload | Description |
|---|---|---|
submit | FormSubmitEvent | Emitted on valid submission. OTP field values are normalized from arrays to joined strings. |
Slots
| Slot | Description |
|---|---|
description | Custom content below the title (overrides the description prop) |
leading | Content between the provider buttons and the form (e.g. an OTP email indicator) |
password-hint | Hint content for password fields (e.g. a "Forgot password?" link) |
footer | Centered content below the form |
AI Context
component: XAuthForm
package: "@xenterprises/nuxt-x-auth"
use-when: Building a custom auth form from declarative field/provider props with Zod validation