Introduction
Regle (from the French word for "rule") is a TypeScript-first form validation library made for Vue 3. I'm a lover and long-time user of Vuelidate API, so Regle's is greatly inspired by it.
Regle is about bringing type safety and great DX for both simple and complex forms. It's entirely data-driven and headless, allowing the validation logic to mirror your data structure, enabling a clear separation between the UI and validation logic.
Declare your form rules inside a component or a Pinia store and use it wherever you like.
Installation
Prerequisites
Required
- Vue
3.3+
. - Typescript
4.8+
.- Compatible with plain javascript.
- Text Editor with Vue syntax support.
- VSCode is recommended, along with the official Vue extension.
Optional
- Nuxt
- Nuxt
3.1+
, and check docs for Nuxt module
- Nuxt
- Pinia
- Pinia
2.2.5+
- Pinia
Schema libraires: Docs
- Zod
3.24+
. - Valibot
1+
. - ArkType
2+
- Any library using the Standard Schema Spec
sh
pnpm add @regle/core @regle/rules
sh
npm install @regle/core @regle/rules
sh
yarn add @regle/core @regle/rules
sh
bun add @regle/core @regle/rules
Quick usage
vue
<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>
<button @click="r$.$reset({toInitialState: true})">Reset</button>
<button @click="r$.$validate">Submit</button>
</template>
<script setup lang='ts'>
import { useRegle } from '@regle/core';
import { required, minLength, email } from '@regle/rules';
const { r$ } = useRegle({ email: '' }, {
email: { required, email, minLength: minLength(4)}
})
</script>
Result:
TIP
You can jump directly to core concepts to learn usage.