๐ฆ
server
โ Headless form validation library for Vue.js
0 installs
Trust: 52 โ Fair
Ai
Installation
npx @regle/mcp-serverAsk AI about server
Powered by Claude ยท Grounded in docs
I know everything about server. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Loading tools...
Reviews
Documentation
Regle
Regle \สษษกl\ (French word for 'rule' ) is a headless model-based form validation library for Vue 3.
It's heavily inspired by Vuelidate and aims to replace it in modern apps.
๐ Documentation
๐ฎ Play with it
| Playground | Simple demo | Advanced Demo |
|---|---|---|
๐ค AI Integration
MCP Server
Or add it manually to your .cursor/mcp.json or .mcp.json
{
"mcpServers": {
"regle": {
"command": "npx",
"args": ["@regle/mcp-server"]
}
}
}
Agent Skills
Install Agent Skills to give your AI coding agent Regle expertise:
npx skills add victorgarciaesgi/regle
โจ Features
- ๐ Headless: Plug any UI or markup to the validation.
- ๐ฏ Type safe: Full inference and autocompletion support.
- ๐ณ Model based: Your validation tree structure matches the data model.
- ๐ Devtools: Built-in Vue devtools extention for easy debugging and testing.
- ๐ค MCP Server: MCP server for easy documentation and autocomplete.
- ๐ง Agent Skills: Agent Skills for AI coding agents.
- ๐จ Style Agnostic: Works with any CSS framework or plain CSS.
- ๐ฆ Modular design: Expand Regle properties or default validation rules.
- ๐ Async validation: Handle asynchronous validations and pending states with ease.
- ๐ i18n Ready: Works with any i18n library.
- ๐ Vuelidate like API: Regle's API mimics Vuelidate's API while improving it on a lot of areas.
- โก๏ธ SSR Ready: Full support for Server Side Rendering environments.
- โ Alternative validation: Standard Schema spec validation support.
๐ Devtools
Regle comes with a built-in Vue devtools extension for easy debugging and testing.

๐ For more details, see the Devtools documentation.
Basic example
<template>
<input v-model="r$.$value.email" :class="{ error: r$.email.$error }" placeholder="Type your email" />
<ul>
<li v-for="error of r$.email.$errors" :key="error">
{{ error }}
</li>
</ul>
</template>
<script setup lang="ts">
import { useRegle } from '@regle/core';
import { required, minLength, email } from '@regle/rules';
const { r$ } = useRegle(
{ email: '' },
{
email: { required, minLength: minLength(4), email },
}
);
</script>
Compatibility:
Vue 3.3+
Nuxt 3.1+
Pinia 2.2.5+
- Standard Schemas
- ๐ฆธโโ๏ธ Zod 3.24+
- ๐ค Valibot 1.0+
- ๐ข Arktype 2.0.0+
โฌ๏ธ Quick install
pnpm install @regle/core @regle/rules
# or
yarn add @regle/core @regle/rules
# or
npm install @regle/core @regle/rules
๐ซถ Credits
- Johannes Lacourly for designing logo and banners ๐ช
- Martins Zeltins who helped me identify a lot of bugs, find new features and contributed to docs.
- Vuelidate Which I loved and used for 8 years, and is my main inspiration for creating Regle
