How to use

import { z } from 'zod'

export const loginSchema = z.object({
  name: z.string().min(5).max(15),
  email: z.string().email().min(1)
})

export type Login = z.input<typeof loginSchema>;

<script setup lang="ts">
  import type { Login } from '~/schema/login.schema'
  import type { FormSubmitEvent } from '#ui/types'

  import { loginSchema } from '~/schema/login.schema'

  const state = reactive({
    name: undefined,
    email: undefined
  })

  function onSubmit (event: FormSubmitEvent<Login>) {
    console.log(event.data)
  }
</script>

<template>
  <UForm 
    :schema="loginSchema" 
    :state="state" 
    class="flex flex-col gap-6 pt-6" 
    @submit="onSubmit"
  >
    <UFormGroup label="Name" name="name">
      <UInput v-model="state.name" placeholder="Your name" />
    </UFormGroup>
    <UFormGroup label="Email" name="email">
      <UInput v-model="state.email" placeholder="Your email" />
    </UFormGroup>
    <UButton type="submit" class="w-fit">
      Save
    </UButton>
  </UForm>
</template>