mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
48 lines
1003 B
Vue
48 lines
1003 B
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { object, string, InferType } from 'yup'
|
|
import type { Form } from '@nuxthq/ui/dist/runtime/types'
|
|
|
|
const schema = object({
|
|
email: string().email('Invalid email').required('Required'),
|
|
password: string()
|
|
.min(8, 'Must be at least 8 characters')
|
|
.required('Required')
|
|
})
|
|
|
|
type Schema = InferType<typeof schema>
|
|
|
|
const state = ref({
|
|
email: undefined,
|
|
password: undefined
|
|
})
|
|
|
|
const form = ref<Form<Schema>>()
|
|
|
|
async function submit () {
|
|
await form.value!.validate()
|
|
// Do something with state.value
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UForm
|
|
ref="form"
|
|
:schema="schema"
|
|
:state="state"
|
|
@submit.prevent="submit"
|
|
>
|
|
<UFormGroup label="Email" name="email">
|
|
<UInput v-model="state.email" />
|
|
</UFormGroup>
|
|
|
|
<UFormGroup label="Password" name="password">
|
|
<UInput v-model="state.password" type="password" />
|
|
</UFormGroup>
|
|
|
|
<UButton type="submit">
|
|
Submit
|
|
</UButton>
|
|
</UForm>
|
|
</template>
|