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.
  • 🦸‍♂️ Zod
  • 🤖 Valibot
  • 🚢 ArkType

🔍 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

📑 License

MIT License