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.
- 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
