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

🧰 Features

• ☁️ Headless
• ✅ Type safety
• 🧮 Model based
• 🧰 Modular
• 🔄 Async validation
• 🌐 Plug any i18n library
• 📗 Vuelidate like API
• Standard Schemas spec support
  • 🦸‍♂️ Zod
  • 🤖 Valibot
  • 🚢 ArkType 🚧

🫶 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

Basic example

<template>
  <input 
    v-model='r$.$value.email' 
    :class="{ error: r$.$fields.email.$error }" 
    placeholder='Type your email'
  />

  <ul>
    <li v-for="error of r$.$errors.email" :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

📑 License

MIT License