Regle
Regle is a type-safe, model-based, headless form validation library for Vue 3. It provides full TypeScript inference, reactive validation, and works with any UI framework or design system.
MCP Server
Regle provides an MCP server that can be used to get documentation and autocomplete for Regle. If it's available, use it to get up-to-date information on the API.
{
"mcpServers": {
"regle": {
"command": "npx",
"args": ["@regle/mcp-server"]
}
}
}
## Installation
```sh
# Core + built-in rules
pnpm add @regle/core @regle/rules
# Optional: schema support (Zod, Valibot, ArkType)
pnpm add @regle/schemas
Requires Vue 3.3+ and TypeScript 5.1+.
Quick Start
import { useRegle } from '@regle/core';
import { required, email, minLength } from '@regle/rules';
const { r$ } = useRegle(
{ name: '', email: '' },
{
name: { required, minLength: minLength(3) },
email: { required, email },
}
);
<template>
<input v-model="r$.$value.name" placeholder="Name" />
<ul v-if="r$.$errors.name.length">
<li v-for="error of r$.$errors.name" :key="error">{{ error }}</li>
</ul>
<button @click="r$.$validate()">Submit</button>
</template>
Key Concepts
- State: first argument -- raw object,
reactive, ref, or single value
- Rules: second argument -- mirrors the data structure, each field gets a rules object
r$: returned reactive object with values, errors, dirty state, and validation methods- All rules are optional by default; add
required to enforce a field
Core
| Topic |
Description |
Reference |
| useRegle |
State definition, rules declaration, dynamic rules, r$ object |
core-use-regle |
| Validation Properties |
$invalid, $dirty, $error, $errors, $pending, $validate, $touch, $reset |
core-validation-properties |
| Displaying Errors |
Showing errors, custom messages, getErrors, flatErrors |
core-displaying-errors |
| Modifiers |
autoDirty, lazy, silent, rewardEarly, disabled, validationGroups, per-field modifiers |
core-modifiers |
Related skills
- regle-rules — built-in rules, custom rules (
createRule), rule wrappers (withMessage, withParams, withAsync), and rule operators (and, or, applyIf, assignIf).
- regle-advanced — collections, async, server errors, reset, scoped validation, variants, global config.
- regle-schemas — Zod, Valibot, ArkType, and Standard Schema integration.
- regle-typescript — type-safe output, typing rules schemas and component props.
1---2name: regle3description: Core Regle form validation in Vue 3 — setup with `useRegle`, the reactive `r$` object, validation properties, displaying errors, and modifiers. Use when adding or editing Regle forms, binding `v-model` to `r$.$value`, or reading `$error`/`$errors`/`$invalid`/`$validate`/`$reset`. For validation rules see regle-rules; for advanced patterns see regle-advanced.4license: MIT5---67# Regle89Regle is a type-safe, model-based, headless form validation library for Vue 3. It provides full TypeScript inference, reactive validation, and works with any UI framework or design system.101112## MCP Server1314Regle provides an MCP server that can be used to get documentation and autocomplete for Regle. If it's available, use it to get up-to-date information on the API.1516```json17{18 "mcpServers": {19 "regle": {20 "command": "npx",21 "args": ["@regle/mcp-server"]22 }23 }24}2526## Installation2728```sh29# Core + built-in rules30pnpm add @regle/core @regle/rules3132# Optional: schema support (Zod, Valibot, ArkType)33pnpm add @regle/schemas34```3536Requires Vue 3.3+ and TypeScript 5.1+.3738## Quick Start3940```ts41import { useRegle } from '@regle/core';42import { required, email, minLength } from '@regle/rules';4344const { r$ } = useRegle(45 { name: '', email: '' },46 {47 name: { required, minLength: minLength(3) },48 email: { required, email },49 }50);51```5253```vue54<template>55 <input v-model="r$.$value.name" placeholder="Name" />56 <ul v-if="r$.$errors.name.length">57 <li v-for="error of r$.$errors.name" :key="error">{{ error }}</li>58 </ul>5960 <button @click="r$.$validate()">Submit</button>61</template>62```6364## Key Concepts6566- **State**: first argument -- raw object, `reactive`, `ref`, or single value67- **Rules**: second argument -- mirrors the data structure, each field gets a rules object68- **`r$`**: returned reactive object with values, errors, dirty state, and validation methods69- All rules are optional by default; add `required` to enforce a field7071## Core7273| Topic | Description | Reference |74|-------|-------------|-----------|75| useRegle | State definition, rules declaration, dynamic rules, `r$` object | [core-use-regle](references/core-use-regle.md) |76| Validation Properties | `$invalid`, `$dirty`, `$error`, `$errors`, `$pending`, `$validate`, `$touch`, `$reset` | [core-validation-properties](references/core-validation-properties.md) |77| Displaying Errors | Showing errors, custom messages, `getErrors`, `flatErrors` | [core-displaying-errors](references/core-displaying-errors.md) |78| Modifiers | `autoDirty`, `lazy`, `silent`, `rewardEarly`, `disabled`, `validationGroups`, per-field modifiers | [core-modifiers](references/core-modifiers.md) |7980## Related skills8182- **regle-rules** — built-in rules, custom rules (`createRule`), rule wrappers (`withMessage`, `withParams`, `withAsync`), and rule operators (`and`, `or`, `applyIf`, `assignIf`).83- **regle-advanced** — collections, async, server errors, reset, scoped validation, variants, global config.84- **regle-schemas** — Zod, Valibot, ArkType, and Standard Schema integration.85- **regle-typescript** — type-safe output, typing rules schemas and component props.
victorgarciaesgi