@formeus/vue
v1.2.1
Published
Input state and validation manager library for Vue
Downloads
1
Readme
Formeus 🌀 Vue
Official Vue adapter for Formeus library.
Installation
yarn add @formeus/vue
npm install @formeus/vue
pnpm add @formeus/vue
Key features
- designed to work with controlled components
- coordinated synchronous and asynchronous validations
- flexible validation times
- validation caching
- protected submit
Minimal Example in Vue
<script setup lang="ts">
import { useForm } from "@formeus/vue"
const { values, update } = useForm({
initial: {
username: "",
password: "",
},
})
function onSubmit() {
api.signIn(values.username, value.password)
}
</script>
<template>
<input
:value="values.username"
@input="(e) => update('username', (e.target as HTMLInputElement).value)"
/>
<input
:value="values.password"
@input="(e) => update('password', (e.target as HTMLInputElement).value)"
/>
<button @click="onSubmit">Submit</button>
</template>
Advanced Example in Vue
<script setup lang="ts">
import { useForm } from "@formeus/vue"
const { values, update, submit } = useForm({
initial: {
username: "",
password: "",
},
validators: {
username: ({ username }) =>
username.length == 0
? new Error("Must contain at least 1 char.")
: undefined,
password: ({ password }) =>
/^((?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9]).{5,})\S/.test(password)
? undefined
: new Error("1 uppercase, 1 lowercase, 1 number and at least 6 chars."),
},
asyncValidators: {
username: ({ username }, signal) => {
// username is already client side validated here
return api
.checkUsernameAvailable(username, signal)
.then((isAvailable) =>
isAvailable ? undefined : new Error("username not available")
)
},
},
onSubmitForm: ({ username, password }) => {
api.signIn(username, password)
},
})
function onSubmit() {
submit.value()
}
</script>
<template>
<input
:value="values.username"
@input="(e) => update('username', (e.target as HTMLInputElement).value)"
/>
<input
:value="values.password"
@input="(e) => update('password', (e.target as HTMLInputElement).value)"
/>
<button @click="onSubmit">Submit</button>
</template>