Nuxt UI v4 is officially released!

AuthForm

FormGitHub
A customizable Form to create login, register or password reset forms.
Take a look at the SaaS template to see how you can build your authentication pages! (view source)

Usage

Built on top of the Form component, the AuthForm component can be used in your pages or wrapped in a Card.

The form will construct itself based on the fields prop and the state will be handled internally. You can pass all the props you would pass to a FormGroup or an Input to each field.

Use the providers prop to add some Buttons above or below the form (depending on the align prop) and the title, description, icon props to customize the form (which can be overriden with slots).

Login
Enter your credentials to access your account.
or
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

As it is a Form underneath, you can handle the validation logic through the schema or validate props.

Welcome back!
Don't have an account? Sign up.
or

Error signing in

By signing in, you agree to our Terms of Service. 
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
You can override each FormGroup slots by prefixing with the field name: #password-hint.

Slots

icon
{}
title
{}
description
{}
validation
{}
footer
{}

Props

icon
string
undefined
ui
DeepPartial<{ wrapper: string; base: string; container: string; title: string; description: string; icon: { wrapper: string; base: string; }; providers: string; form: string; footer: string; passwordToggle: { showIcon: string; hideIcon: string; }; default: { submitButton: { label: string; }; passwordToggle: { color: ButtonColor; variant: ButtonVariant; }; }; }>
{}
title
string
undefined
align
"bottom" | "top"
"bottom"
schema
any
undefined
validate
((state: any) => Promise<FormError<string>[]>) | ((state: any) => FormError<string>[])
undefined
validateOn
FormEventType[]
["submit"]
fields
{ name: string; type: string; label: string; description?: string; help?: string; hint?: string; size?: FormGroupSize; placeholder?: string; required?: boolean; value?: string | number; readonly?: boolean; }[]
[]
description
string
undefined
divider
string
"or"
providers
(Button & { click?: (...args: any[]) => void; })[]
[]
passwordToggle
Button
{}
submitButton
Button
{}
loading
boolean
false

Config

{
  wrapper: 'w-full max-w-sm space-y-6',
  base: '',
  container: 'gap-y-6 flex flex-col',
  title: 'text-2xl text-gray-900 dark:text-white font-bold',
  description: 'text-gray-500 dark:text-gray-400 mt-1',
  icon: {
    wrapper: 'mb-2 pointer-events-none',
    base: 'w-8 h-8 flex-shrink-0 text-gray-900 dark:text-white'
  },
  providers: 'space-y-3',
  form: 'space-y-6',
  footer: 'text-sm text-gray-500 dark:text-gray-400 mt-2',
  default: {
    submitButton: {
      label: 'Continue'
    }
  }
}

AsideLinks

A list of links displayed in the Aside.

BlogList

Display your BlogPost in an horizontal / vertical list.