mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
39 lines
1000 B
Vue
39 lines
1000 B
Vue
<script setup lang="ts">
|
|
import * as v from 'valibot'
|
|
import type { FormSubmitEvent } from '@nuxt/ui'
|
|
|
|
const schema = v.object({
|
|
email: v.pipe(v.string(), v.email('Invalid email')),
|
|
password: v.pipe(v.string(), v.minLength(8, 'Must be at least 8 characters'))
|
|
})
|
|
|
|
type Schema = v.InferOutput<typeof schema>
|
|
|
|
const state = reactive({
|
|
email: '',
|
|
password: ''
|
|
})
|
|
|
|
const toast = useToast()
|
|
async function onSubmit(event: FormSubmitEvent<Schema>) {
|
|
toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
|
|
console.log(event.data)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UForm :schema="v.safeParser(schema)" :state="state" class="space-y-4" @submit="onSubmit">
|
|
<UFormField label="Email" name="email">
|
|
<UInput v-model="state.email" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Password" name="password">
|
|
<UInput v-model="state.password" type="password" />
|
|
</UFormField>
|
|
|
|
<UButton type="submit">
|
|
Submit
|
|
</UButton>
|
|
</UForm>
|
|
</template>
|