Hey everyone
I’ve been working on a Vue 3 form library called vue-uform, and I think it might be useful for folks who want flexible, unstyled, component-driven form validation without the boilerplate.
Why I built it
Most form libraries either:
- Come with a bunch of built-in styles that don’t match your design system, or
- Require too much JS/TS setup for simple forms.
vue-uform takes a different approach:
- No built-in styles – you have full control over HTML & CSS.
- Treats components as first-class citizens – validation, data flow, and UI are all component-based.
- Works with any UI library (Element Plus, Naive UI, etc.).
- Supports built-in & custom validation rules (inspired by FormKit).
Quick Example
<script setup>
const formValues = { username: '', password: '' }
function doLogin(data) {
console.log(data)
}
</script>
<template>
<u-form :values="formValues" @submit="doLogin">
<u-field name="username" label="Username" validation="required" v-slot="{ value, update }">
<input f-model />
</u-field>
<u-field name="password" label="Password" validation="required|min:6" v-slot="{ value, update }">
<input type="password" f-model />
</u-field>
<u-submit>Login</u-submit>
</u-form>
</template>
That f-model directive is provided by a small Vite plugin – it’s like v-model but tailored for form fields.
✅ Built-in validation rules include:
required, number, email, between, starts_with, url, and more – you can also add your own custom rules with parameters
Example custom rule:
<script setup lang="ts">
function isfruit(node: FieldNode): boolean | string {
const { value } = node;
if (value.value != "apple" && value.value != "banana") {
return "this value is not apple or banana";
}
return true;
}
</script>
<template>
<u-field
name="fruit"
label="Fruit"
help="please input a fruit"
:rules="{ isfruit }"
validation="required|isfruit"
v-slot="{ value, update }"
>
<input f-model />
</u-field>
</template>
Installation
pnpm install vue-uform
pnpm install @vue-uform/vite-plugin -D
Links
GitHub: https://github.com/tu6ge/vue-uform
StackBlitz: https://stackblitz.com/~/github.com/tu6ge/vue-uform-example
