AuthForm

FormGitHub

A customizable Form to create login, register or password reset forms.

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
<UAuthForm
  title="Login"
  description="Enter your credentials to access your account."
  align="bottom"
  icon="i-heroicons-user-circle"
  :fields="[{ type: 'email', label: 'Email', placeholder: 'Enter your email', color: 'gray' }, { type: 'password', label: 'Password', placeholder: 'Enter your password', color: 'gray' }]"
  :providers="[{ label: 'GitHub', icon: 'i-simple-icons-github', color: 'gray' }]"
/>

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

By signing in, you agree to our Terms of Service. 

<script setup lang="ts">
import type { FormError } from '#ui/types'

const fields = [{
  name: 'email',
  type: 'text',
  label: 'Email',
  placeholder: 'Enter your email'
}, {
  name: 'password',
  label: 'Password',
  type: 'password',
  placeholder: 'Enter your password'
}]

const validate = (state: any) => {
  const errors: FormError[] = []
  if (!state.email) errors.push({ path: 'email', message: 'Email is required' })
  if (!state.password) errors.push({ path: 'password', message: 'Password is required' })
  return errors
}

const providers = [{
  label: 'Continue with GitHub',
  icon: 'i-simple-icons-github',
  color: 'white' as const,
  click: () => {
    console.log('Redirect to GitHub')
  }
}]

function onSubmit (data: any) {
  console.log('Submitted', data)
}
</script>

<!-- eslint-disable vue/multiline-html-element-content-newline -->
<!-- eslint-disable vue/singleline-html-element-content-newline -->
<template>
  <UCard class="max-w-sm w-full">
    <UAuthForm
      :fields="fields"
      :validate="validate"
      :providers="providers"
      title="Welcome back!"
      align="top"
      icon="i-heroicons-lock-closed"
      :ui="{ base: 'text-center', footer: 'text-center' }"
      @submit="onSubmit"
    >
      <template #description>
        Don't have an account? <NuxtLink to="/" class="text-primary font-medium">Sign up</NuxtLink>.
      </template>

      <template #password-hint>
        <NuxtLink to="/" class="text-primary font-medium">Forgot password?</NuxtLink>
      </template>

      <template #footer>
        By signing in, you agree to our <NuxtLink to="/" class="text-primary font-medium">Terms of Service</NuxtLink>.
      </template>
    </UAuthForm>
  </UCard>
</template>
You can override each FormGroup slots by prefixing with the field name: #password-hint.

Slots

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

Props

ui
{}
{}
icon
string
undefined
title
string
undefined
description
string
undefined
align
"top" | "bottom"
"bottom"
fields
Field[]
[]
providers
(Button & { click?: Function; })[]
[]
submitButton
{}
{}
schema
any
undefined
validate
((state: any) => Promise<FormError<string>[]>) | ((state: any) => FormError<string>[])
undefined
validateOn
FormEventType[]
["submit"]
divider
string
"or"

NavigationAccordion

A pre-styled Accordion displayed in the NavigationTree.

ColorModeAvatar

An Avatar with a different src for light and dark mode.