Regle

Regle \ʁɛɡl\ (French word for 'rule' ) is a Typescript-first model-based form validation library for Vue 3. It's heavily inspired by Vuelidate.

📚 Documentation

🎮 Play with it

Simple demo	Advanced Demo

🧰 Features

• ✅ Typescript first
• 🤖 100% type inference
• 📖 Model based validation
• 🪗 Extensible
• 🦸‍♂️ Zod support
• 🤖 Valibot support
• 🪶 Light(~7kb gzip) and 0 dependencies
• 🛒 Collection validation

🫶 Thanks

Special thank you for Martins Zeltins who helped me identify a lot of bugs, find new features and contributed to docs.

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$.$fields.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
• Pinia

☑️ Roadmap

For v1.0

• Unit tests
• E2E tests
• Example repo, Reproduction repl
• Type tests

Next iterations

• Valibot support
• Yup support
• TS docs

🤔 Maybe in roadmap

• Typed plugin system (like scrollToError)

⬇️ 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