vue-forms
Skill28 starsChanged 30 days agoMITView on GitHub
Forms and validation in Vue 3. v-model and defineModel, custom inputs, schema validation with VeeValidate and Zod or with Regle, async rules, multi-step wizards, submit states, unsaved-changes guards and accessible errors. Use when building or reviewing forms, inputs, validation or file uploads in Vue.
In this repository16 other files it gives its agents.
- antfuSkill
- build-toolingSkill
- designSkill
- find-skillsSkill
- nuxtSkill
- vitepressSkill
- vue-a11ySkill
- vue-ciSkill
- vue-clean-componentsSkill
- vue-dataSkill
- vue-debugSkill
- vue-performanceSkill
- vue-reviewSkill
- vueSkill
- vue-uiSkill
- vue-upgradeSkill
The file
Files
Vue Forms
Versions checked on 2026-10-15: Vue 3.5 (defineModel), vee-validate 4.15 with zod 4.6, @regle/core 1.29. FormKit and @tanstack/vue-form are also fine; follow what the project already uses.
Decision table
| Form | Approach |
| One to three fields with trivial rules (login, search) | Native v-model plus a small validation composable |
| Business forms with a schema shared with the API | VeeValidate with Zod (toTypedSchema), one schema for client and server |
| Type-safe, model-based validation without a form wrapper | Regle (useRegle, the r$ object, built-in rules, Standard Schema support) |
| Config-driven forms | FormKit, or a renderer on top of VeeValidate or Regle |
| A custom input component | defineModel(); never mutate props or sync with a watcher |
Rules
- Validate on the server with the same schema. Client validation is for the user, not for security.
- Show errors on blur or after the first submit, not on every keystroke of a fresh field.
- Disable the submit button only while submitting, not while invalid; the click is how users find what is missing.
- Tie every error to its input with
aria-describedbyand setaria-invalid. Thevue-a11yskill has details. - Guard unsaved changes with
onBeforeRouteLeaveand a dirty flag.
References
| Topic | Path |
v-model, defineModel, custom controls, a small validation composable | native-form-patterns |
VeeValidate with Zod: typed schemas, useForm, useField, field arrays, async rules | vee-validate-zod |
Regle core: useRegle, validation properties, errors, modifiers | regle-guide |
| Regle rules: built-ins, custom rules, operators, wrappers | regle-rules |
| Regle with Zod, Valibot or ArkType through Standard Schema | regle-schemas |
| Wizards, submit states, dirty guards, file uploads | form-ux-patterns |
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.