Lightweight, type-safe forms for Vue.
- Interactive demo.
- Typed field names and values.
- Reactive field values and validation errors.
- Field validation with
async-validatorrules. - Async submit callbacks with a
loadingstate. - Default values, form reset, and manual field errors.
$ npm install @devlsh/form
Validate an email field before submission.
<template> <form novalidate @submit="submit"> <label for="email">Email Address</label> <input id="email" name="email" type="email" autocomplete="email" required :disabled="loading" :aria-invalid="email.hasError" :aria-describedby="email.hasError ? 'email-error' : undefined" v-model="email.value" /> <p id="email-error" role="alert" v-if="email.hasError">{{ email.error?.message }}</p> <button type="submit" :disabled="loading">Submit</button> </form> </template> <script setup lang="ts"> import { useForm } from '@devlsh/form'; interface MyForm { email: string; } const { useField, handle, loading } = useForm<MyForm>({ defaults: { email: '' }, }); const email = useField('email', { type: 'email', required: true, }); const submit = handle(async (values) => { console.log(values.email); }); </script>
Report bugs through issues or ask questions in Discussions. Report vulnerabilities privately as described in SECURITY.md.
For local development, pull requests, and other contributions, see the Contributing Guidelines.
@devlsh/form is free and open-source software licensed under the MIT License.
devlsh.com · GitHub: @devlsh · X: @itsdevlsh