regle-migrate-vuelidate

star 472

Migrate Vuelidate form validation to Regle. Use when porting forms that import from `@vuelidate/core`/`@vuelidate/validators` or call `useVuelidate` over to `useRegle`/`useScopedRegle`, including rules, validation properties, `v-model` bindings, nested/scoped validation, and parent-child form propagation.

victorgarciaesgi By victorgarciaesgi schedule Updated 6/11/2026

name: regle-migrate-vuelidate description: Migrate Vuelidate form validation to Regle. Use when porting forms that import from @vuelidate/core/@vuelidate/validators or call useVuelidate over to useRegle/useScopedRegle, including rules, validation properties, v-model bindings, nested/scoped validation, and parent-child form propagation. license: MIT compatibility: Requires Vue 3.3+, TypeScript 5.1+, @regle/core, and @regle/rules. Works with any agent supporting the Agent Skills spec. metadata: author: Victor Garcia version: "1.27.0" source: https://reglejs.dev/introduction/migrate-from-vuelidate

Migrate Vuelidate to Regle

Convert form validations built with Vuelidate to Regle. Take every form, rule, and validation property into account.

Knowledge sources

Use these for API details, patterns, and TypeScript typing (in priority order):

  1. Regle MCP server (if available): search for "Migrate from Vuelidate" and other topics. If it is not active, ask the user to enable it or enable it yourself.
  2. Sibling Regle skills:
    • regleuseRegle, validation properties ($error, $errors, $validate, $reset), modifiers, displaying errors.
    • regle-rules — built-in rules, createRule, wrappers (withMessage), operators (requiredIf, applyIf, assignIf).
    • regle-advanced — scoped validation (useScopedRegle, useCollectScope), collections, async rules, server errors, $self.
    • regle-schemas — schema-based validation (Zod, Valibot, ArkType) when a form uses a schema.
    • regle-typescriptinferRules, typing rules and props (RegleRoot, InferRegleRoot, SuperCompatibleRegleRoot).
  3. Docs / LLM-friendly references: https://reglejs.dev/introduction/migrate-from-vuelidate, https://reglejs.dev/llms.txt (glossary), https://reglejs.dev/llms-full.txt (full docs).

Global rules

  • $autoDirty is true by default in Regle — do not set it, and remove manual $touch() calls.
  • Keep the variable name when renaming the composable result: a Vuelidate v$ (or any other name) becomes r$ with the same identifier.
  • Bind form values to the *.$value properties from Regle.
  • Do not use r$.$fields.xxx; access fields directly as r$.xxx.
  • Before writing a custom rule, check for an equivalent built-in rule first.
  • If a specific case is unclear, ask the user or leave it unchanged rather than guessing.

Workflow

Copy this checklist and track progress:

- [ ] 1. Identify the Vuelidate form
- [ ] 2. Replace the imports
- [ ] 3. Replace the state
- [ ] 4. Replace the validation rules
- [ ] 5. Replace the validation properties
- [ ] 6. Replace binding events
- [ ] 7. Replace nested-component validation (scoped)
- [ ] 8. Inspect form propagation (parent <-> child)
- [ ] 9. Self-review and run typecheck + lint

Follow the detailed step-by-step instructions in migration-steps.

Install via CLI
npx skills add https://github.com/victorgarciaesgi/regle --skill regle-migrate-vuelidate
Repository Details
star Stars 472
call_split Forks 22
navigation Branch main
article Path SKILL.md
More from Creator
victorgarciaesgi
victorgarciaesgi Explore all skills →