KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agents #developer-tools #typescript #codex #cli #claude-code #mcp #rust #deepseek-harness #ai-agent

regle

★ 492 Open GitHub ↗

✅ Headless form validation library for Vue.js

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[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

[![Documentation](https://raw.githubusercontent.com/victorgarciaesgi/regle/refs/heads/main/.github/images/redirectDoc.svg)](https://reglejs.dev/)

## 🎮 Play with it

| Playground                                                                                                                                                                                           | Simple demo                                                                                                                                                                                                                                                             | Advanced Demo                                                                                                                                                                                                                                                                 |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <a target='_blank' href="https://play.reglejs.dev"><img width="180" src="https://raw.githubusercontent.com/victorgarciaesgi/regle/refs/heads/main/.github/images/regle-playground-button.svg" /></a> | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/~/github.com/victorgarciaesgi/regle-examples/tree/main/examples/simple-example?file=examples/simple-example/src/App.vue&configPath=examples/simple-example) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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. <img src="https://raw.githubusercontent.com/victorgarciaesgi/regle/master/.github/images/icons/nuxt.svg" alt='nuxt'/>
- ✅ **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.

![Regle Devtools Screenshot](https://reglejs.dev/screenshots/devtools.png)

> 📝 For more details, see the [Devtools documentation](https://reglejs.dev/introduction/devtools).

## Basic example

```vue
<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>

const { r$ } = useRegle(
    { email: '' },
    {
      email: { required, minLength: minLength(4), email },
    }
  );
</script>
```

## Compatibility:

- <img src="https://raw.githubusercontent.com/victorgarciaesgi/regle/master/.github/images/icons/vue.svg" alt='vue'/> Vue 3.3+
- <img src="https://raw.githubusercontent.com/victorgarciaesgi/regle/master/.github/images/icons/nuxt.svg" alt='nuxt'/> Nuxt 3.1+
- <img src="https://raw.githubusercontent.com/victorgarciaesgi/regle/master/.github/images/icons/pinia.svg" alt='pinia'/> 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)

regle

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README