DEV Community: tu6ge

I’ve Decided to Redefine Two-Way Binding in Vue

tu6ge — Tue, 26 Aug 2025 12:47:29 +0000

In Vue, we already have the very convenient v-model syntax sugar. It handles two essential things for us:

When a JavaScript variable has a value, it fills the input field.
When the input changes, the new value is passed back to JavaScript.

That’s basically what v-model does under the hood.

So why redefine two-way binding?

The reason is that I’ve been exploring a new approach to form validation. I believe the next generation of Vue form validators should be:

Component-driven – the form behavior is powered by components, not configuration.
Style-agnostic – no built-in styling, leaving developers free to define layouts.
Flexible with UI libraries – should work seamlessly with input components from libraries like Naive UI, Element Plus, or even fully custom ones.

What existing validators do

When I looked at existing solutions, I found a common pattern: each form field usually comes with:

A label
An input
A help message
An error message (shown when validation fails)

Some libraries solve this by bundling their own input components and tightly integrating them with validation. While this works, it reduces flexibility.

I wanted something different: a validator that lets developers use their own UI components, while still handling value binding and validation logic cleanly.

The idea: u-field component

To achieve this, I introduced the idea of a u-field component.
You can put any input component into its slot.

The u-field exposes two key bindings to its slot:

value passes the form data down to the input.
update sends the new input value back up to the form.

This makes synchronization possible, and sets the stage for validation.

For example:

<template>
  <u-field v-slot="{ value, update }">
    <input :value="value" @input="($event) => update($event.target.value)" />
  </u-field>
</template>

Why not just v-model?

Looking at Vue’s official docs, this is exactly the kind of code v-model was meant to simplify.
But when binding with parent components (not just local state), we need another kind of syntax sugar.

So, inspired by vue-macros, I created a Vite plugin to introduce a new directive: f-model.

With f-model, the example above becomes:

<template>
  <u-field v-slot="{ value, update }">
    <input f-model />
  </u-field>
</template>

Beyond text inputs

Of course, text inputs are the simplest case.
For other components like radio buttons, checkboxes, or selects, special handling is still needed.

For third-party components, it’s straightforward:

With a regular input:

<input f-model />

With Naive UI’s n-input (which uses v-model:value):

<n-input f-model:value />

vue-uform is still evolving, but I’d love to hear your feedback. Try it out on GitHub or play with the StackBlitz demos, and let me know what you think!

GitHub: https://github.com/tu6ge/vue-uform/
StackBlitz: vue-uform & tailwind https://stackblitz.com/edit/vue-uform-tailwind?file=src%2FApp.vue
StackBlitz: vue-uform & scheme https://stackblitz.com/edit/vue-uform-tailwind-scheme?file=src%2FApp.vue

vue-uform: A Component-First, Unstyled Form Validation Library for Vue 3

tu6ge — Mon, 11 Aug 2025 12:23:42 +0000

1. The Problem with Most Form Libraries
When building forms in Vue, I’ve often found that existing solutions fall into one of two camps:

Overly opinionated – They ship with a lot of styling and layout assumptions that don’t match your UI framework or design system.
Too much boilerplate – Setting up form values, validation rules, and event handlers requires a ton of JS/TS code for even basic forms.

If you’ve worked with frameworks like VeeValidate or FormKit, you know they are powerful, but sometimes you just want complete control over markup and styling, while still getting a declarative, maintainable form API.

2. Enter vue-uform
vue-uform is my attempt to solve these pain points.
It’s a unstyled, component-first form library for Vue 3.

Key ideas:

Component-first API – Fields, forms, and submit buttons are all Vue components.
No built-in styles – You write your own HTML & CSS or use your favorite UI framework (Element Plus, Naive UI, Vuetify…).
Composable validation – Built-in rules for common needs, plus an easy API for custom validators.
f-model directive – A tiny Vite plugin that gives you v-model-like syntax for form fields, without repetitive boilerplate.

3. Quick Start Example

<script setup>
const formValues = { username: '', password: '' }

function doLogin(data) {
  console.log('Form submitted:', 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>

Here, <u-field> handles:

Tracking the field’s value
Running validation rules
Passing data to the form

The f-model directive is provided by @vue-uform/vite-plugin, which compiles:

<input f-model />

into

<input :value="value" @input="$event => update($event.target.value)" />

4. Built-in Validation Rules

Out of the box, you get:
required, number, email, between, max, min, alpha, alphanumeric, starts_with, ends_with, url, and more.

Example custom validator with parameters:

<script setup>
import { FieldNode } from 'vue-uform'

function minWords(node: FieldNode, min: number) {
  const words = String(node.value.value).trim().split(/\s+/).length
  return words >= min || `Please enter at least ${min} words.`
}
</script>

<template>
  <u-field
    name="bio"
    validation="min_words:5"
    :rules="{ min_words: minWords }"
    v-slot="{ value, update }"
  >
    <textarea f-model></textarea>
  </u-field>
</template>

5. Why This Works Well

UI Freedom – Works equally well with native HTML inputs or from Naive UI, from Element Plus, etc.
Declarative Structure – The form is defined entirely in the template; minimal JS/TS logic is needed.
Extensible – Add custom validation logic without hacking the core.
Consistent API – Every field gets the same slot props (value, update, hasError).

6. Installation

pnpm install vue-uform
pnpm install @vue-uform/vite-plugin -D

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uForm from '@vue-uform/vite-plugin'

export default defineConfig({
  plugins: [vue(), uForm()],
})

// main.ts
import { plugin } from 'vue-uform'

createApp(App).use(plugin).mount('#app')

7. Link

GitHub: https://github.com/tu6ge/vue-uform
StackBlitz: https://stackblitz.com/~/github.com/tu6ge/vue-uform-example

Closing Thoughts

If you like the flexibility of writing your own HTML & CSS but want the convenience of declarative form handling and validation, vue-uform might be a good fit.
I’d love to hear your feedback, ideas, and PRs.

valitron 0.2.0 release

tu6ge — Mon, 25 Sep 2023 02:38:05 +0000

Valitron is an ergonomics, functional and configurable validator

Major

Support generics validate message, and the can be used with build-in rules.
Support conversion between validators of different message types.

Features

add bail in Validator
support same filed multi insert rule
build-in rule optimize and add documents

Next rust validator, should be ergonomics and functional

tu6ge — Fri, 15 Sep 2023 08:17:15 +0000

valitron is an new validator, It has multiple features:

Ergonomics validation
Build-in rule, e.g. Required, StartWith ...
Closure validate
Related validate, e.g. password confirm
Custom rule with other parameter
Check / modify input data
Custom error message
collect validate error messages
Support all types data on #[dervic(Serialize, Deserialize)]

https://github.com/tu6ge/valitron