Regle \ʁɛɡl\ (French word for 'rule' ) is a type-safe model-based form validation library for Vue 3.
It's heavily inspired by Vuelidate.
| Simple demo | Advanced Demo |
|---|---|
 |
|
- 🤖 100% type inference
- 📖 Model based validation
- 🪗 Extensible
- 🛒 Collection validation
- 🦸♂️ Zod support
- 🤖 Valibot support
- 🪶 Light(~7kb gzip) and 0 dependencies
- 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$.$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>
Vue 3.3+
Nuxt 3
Pinia- 🦸♂️ Zod
- 🤖 Valibot
pnpm install @regle/core @regle/rules
# or
yarn add @regle/core @regle/rules
# or
npm install @regle/core @regle/rules