tinyval-vue

Vue 3 form state on tinyval schemas: values for v-model, errors, touched fields, submission, server errors and async checks.

• ~2 kB gzip on top of the schemas, ~4 kB with every add-on and component — only what you use is bundled
• Composables (useForm, useField, useFieldArray) or components (<TvForm>, <TvField>, <TvError>) — whichever you prefer
• Errors are shown at the right time: after leaving a field, while typing or after submit
• A Laravel 422 response is spread over the fields automatically
• Types: form.values come from the initial values, handleSubmit data from the schema

Install

npm install tinyval tinyval-vue

Quick start

<script setup lang="ts">
import { object, string, pipe, trim, minLength, email } from 'tinyval';
import { useForm } from 'tinyval-vue';

const Signup = object({
  name: pipe(string(), trim(), minLength(2)),
  email: pipe(string(), email()),
});

const form = useForm(Signup, { initial: { name: '', email: '' } });

const submit = form.handleSubmit(async (data) => {
  await api.post('/signup', data); // data: { name: string; email: string }
});
</script>

<template>
  <form @submit="submit">
    <input v-model="form.values.name" @blur="form.touch('name')" />
    <span v-if="form.errors.name">{{ form.errors.name }}</span>

    <input v-model="form.values.email" @blur="form.touch('email')" />
    <span v-if="form.errors.email">{{ form.errors.email }}</span>

    <button :disabled="form.submitting">Sign up</button>
  </form>
</template>

Schemas are regular tinyval schemas: all rules, messages and examples from the tinyval docs work in useForm unchanged.

Try it

Try taken@mail.ru — the "server" will say it is taken.

Name Email Age (optional) Password Confirm password

{
  "valid": false,
  "dirty": false,
  "submitted": false,
  "touched": []
}

Further reading

• Form data — values, data, changes, errors and how they change
• Form fields — what each field type gives and which schema to use
• Errors — when they are shown, server errors, language
• Async checks — "email is not taken" with a typing delay
• Multi-step forms — step-by-step validation
• Editing & drafts — PATCH only changed fields, draft, leave warning
• UI libraries — Element Plus, Vuetify, PrimeVue, your own field component
• API — useForm, useField, useFieldArray, useDraft, useLeaveGuard