Loading...
Loading...
Core skills for using Regle form validation in Vue.js. Provides setup, validation rules, and usage patterns.
npx skill4agent add victorgarciaesgi/regle regle{
"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/schemasimport { 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>reactiverefr$required| Topic | Description | Reference |
|---|---|---|
| useRegle | State definition, rules declaration, dynamic rules, | core-use-regle |
| Built-in Rules | All validation rules from | core-built-in-rules |
| Validation Properties | | core-validation-properties |
| Displaying Errors | Showing errors, custom messages, | core-displaying-errors |
| Modifiers | | core-modifiers |
| Topic | Description | Reference |
|---|---|---|
| Custom Rules | Inline rules, | core-custom-rules |
| Rule Wrappers | | core-rule-wrappers |
| Rule Operators | | core-rule-operators |