https://github.com/victorgarciaesgi/regle
✅ Headless form validation library for Vue.js
https://github.com/victorgarciaesgi/regle
forms vue-form vue-forms vue-rules vue-validation vue-zod vuelidate vuelidate-alternative
Last synced: about 2 months ago
JSON representation
✅ Headless form validation library for Vue.js
- Host: GitHub
- URL: https://github.com/victorgarciaesgi/regle
- Owner: victorgarciaesgi
- License: mit
- Created: 2023-09-25T14:46:42.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2026-04-02T08:11:48.000Z (about 2 months ago)
- Last Synced: 2026-04-02T23:01:44.728Z (about 2 months ago)
- Topics: forms, vue-form, vue-forms, vue-rules, vue-validation, vue-zod, vuelidate, vuelidate-alternative
- Language: TypeScript
- Homepage: https://reglejs.dev
- Size: 19 MB
- Stars: 434
- Watchers: 2
- Forks: 14
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- fucking-awesome-vue - regle - ✅ Headless form validation library for Vue.js. (Components & Libraries / UI Utilities)
- awesome-vue - regle - ✅ Headless form validation library for Vue.js. (Components & Libraries / UI Utilities)
README
[npm-version-src]: https://img.shields.io/npm/v/@regle/core.svg
[npm-version-href]: https://www.npmjs.com/package/@regle/core
[npm-downloads-src]: https://img.shields.io/npm/dm/@regle/core.svg
[npm-total-downloads-src]: https://img.shields.io/npm/dt/@regle/core.svg
[npm-downloads-href]: https://www.npmjs.com/package/@regle/core
# 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
[](https://reglejs.dev/)
## 🎮 Play with it
| Playground | Simple demo | Advanced Demo |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 
| [](https://stackblitz.com/~/github.com/victorgarciaesgi/regle-examples/tree/main/examples/simple-example?file=examples/simple-example/src/App.vue&configPath=examples/simple-example) | [](https://stackblitz.com/~/github.com/victorgarciaesgi/regle-examples/tree/main/examples/advanced-example?file=examples/advanced-example/src/App.vue&configPath=examples/advanced-example) |
## 🤖 AI Integration
### MCP Server
Or add it manually to your `.cursor/mcp.json` or `.mcp.json`
```json
{
"mcpServers": {
"regle": {
"command": "npx",
"args": ["@regle/mcp-server"]
}
}
}
```
### Agent Skills
Install [Agent Skills](https://skills.sh/) to give your AI coding agent Regle expertise:
```bash
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](https://skills.sh/) 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](https://standardschema.dev/) spec validation support.
- 🦸♂️ [Zod](https://zod.dev/)
- 🤖 [Valibot](https://valibot.dev/)
- 🚢 [ArkType](https://arktype.io)
## 🔍 Devtools
Regle comes with a built-in Vue devtools extension for easy debugging and testing.
> 📝 For more details, see the [Devtools documentation](https://reglejs.dev/introduction/devtools).
## Basic example
```vue
-
{{ error }}
import { useRegle } from '@regle/core';
import { required, minLength, email } from '@regle/rules';
const { r$ } = useRegle(
{ email: '' },
{
email: { required, minLength: minLength(4), email },
}
);
```
## 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
```bash
pnpm install @regle/core @regle/rules
# or
yarn add @regle/core @regle/rules
# or
npm install @regle/core @regle/rules
```
## 🫶 Credits
- [Johannes Lacourly](https://www.behance.net/johanneslaf7dc) for designing logo and banners 🪄
- [Martins Zeltins](https://github.com/martinszeltins) who helped me identify a lot of bugs, find new features and contributed to docs.
- [Vuelidate](https://vuelidate-next.netlify.app) Which I loved and used for 8 years, and is my main inspiration for creating Regle
## 📑 License
[MIT License](./LICENSE)