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.
| Simple demo | Advanced Demo |
|---|---|
 |
|
- ✅ 100% type inference
- 📖 Model based validation
- 💀 Headless
- 🪗 Extensible
- 🛒 Collection validation
- Standard Schemas spec support
- 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$.$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>
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