nuxt-x-auth-local

Form

Shared Zod-validated form shell used internally by all nuxt-x-auth-local page components.

Form

The XAuthForm component is the low-level form shell shared by all auth page components in this layer (XAuthLogin, XAuthSignup, XAuthForgotPassword, and the reset-password page). It renders the centered icon/title/description header, a Zod-validated UForm generated from a fields array (with password visibility toggles), and a block submit button.

Components

`<XAuthForm />`

Use XAuthForm to build a custom auth form that matches the standard auth UI.

<script setup>
import { z } from 'zod'

const fields = [
  { name: 'email', type: 'email', label: 'Email', placeholder: 'you@example.com', required: true },
]
const schema = z.object({ email: z.string().email() })
</script>

<template>
  <XAuthForm
    title="Reset Password"
    description="Enter your new password below"
    icon="i-lucide-key-round"
    :fields="fields"
    :schema="schema"
    :submit="{ label: 'Continue' }"
    @submit="onSubmit"
  />
</template>

Props

Prop	Type	Default	Description
`icon`	`string`	`undefined`	Iconify icon shown in a circle above the title (e.g. `i-lucide-log-in`)
`title`	`string`	`undefined`	Heading displayed above the form
`description`	`string`	`undefined`	Subheading below the title (overridden by the `description` slot)
`fields`	`array`	`[]`	Field descriptors: `{ name, type: 'email' \| 'text' \| 'password', label, placeholder, required }`
`schema`	`object`	`undefined`	Zod schema passed to `UForm` for validation
`submit`	`object`	`{ label: 'Continue' }`	Submit button options (`label`)
`loading`	`boolean`	`false`	Disables inputs and shows a loading state on the submit button

Emits

Event	Payload	Description
`submit`	`FormSubmitEvent`	Emitted by `UForm` on valid submit; read values from `event.data`

Slots

Slot	Description
`description`	Replaces the `description` prop below the title (used for "Sign up" / "Sign in" links)
`password-hint`	Hint rendered on password fields (used for the "Forgot password?" link)
`footer`	Content rendered below the submit button

AI Context

component: XAuthForm
package: "@xenterprises/nuxt-x-auth-local"
use-when: Building a custom auth form for a local JWT backend that needs the shared fields-driven, Zod-validated form shell

Edit this pageorReport an issue

ForgotPassword

Password reset request form that posts to the configured forgot-password endpoint and shows a success state.

useXAuth

Self-hosted JWT authentication composable with useState shared state, automatic token refresh on 401, and full auth method coverage.