Something went wrong. Try again.
A modern frontend for Github repositories (ironically hosted on Tangled)
Something went wrong. Try again.
1.2 kB · 48 lines
Vue
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849<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")), confirmPassword: v.pipe( v.string(), v.minLength(8, "Must be at least 8 characters"), ),});
type Schema = v.InferOutput<typeof schema>;
const state = reactive({ email: "", password: "", confirmPassword: "",});
const toast = useToast();async function onSubmit(event: FormSubmitEvent<Schema>) { toast.add({ title: "Success", description: "The form has been submitted.", color: "success", });}</script>
<template> <UForm :schema="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>
<UFormField label="Confirm Password" name="confirmPassword"> <UInput v-model="state.confirmPassword" type="password" /> </UFormField>
<UButton type="submit"> Submit </UButton> </UForm></template>