mcpField
R
regle-migrate-vuelidate

regle-migrate-vuelidate

github.com/victorgarciaesgiDevelopment51354 installsUpdated 2w ago
Repository

About regle-migrate-vuelidate

A migration skill for converting Vuelidate form validation to Regle. It guides developers through forms, rules, state, and validation bindings while emphasizing documented APIs and avoiding guesses.

Key features

  1. 01Stepwise migration checklist
  2. 02Form state and rule conversion
  3. 03Validation property and binding updates
  4. 04Guidance for scoped validation
  5. 05Checks built-in rules before custom ones

Use cases

  1. 01Migrating a Vue form from Vuelidate to Regle
  2. 02Updating nested components with scoped validation

MCP support

When available, it directs the migration process to consult the Regle MCP server for API details and migration guidance.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/victorgarciaesgi/regle --skill regle-migrate-vuelidate

After installing, type/regle-migrate-vuelidatein Claude Code to confirm it loaded.

Bundled filesreferences/migration-steps.md

Details

From the project README

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:
    • regle — useRegle, 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-typescript — inferRules, 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.

Comments

Markdown supported