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.

Playground	Simple demo	Advanced Demo

• 🔌 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.
• 🎨 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

• 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

<template>
  <input 
    v-model='r$.$value.email' 
    :class="{ error: r$.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>

• Vue 3.3+
• Nuxt 3.1+
• Pinia 2.2.5+
• Standard Schemas
  • 🦸‍♂️ Zod 3.24+
  • 🤖 Valibot 1.0+
  • 🚢 Arktype 2.0.0+

pnpm install @regle/core @regle/rules
# or
yarn add @regle/core @regle/rules
# or
npm install @regle/core @regle/rules

MIT License