Introduction

Regle is a type safe and headless form validation library made for Vue.

It's entirely data-driven, allowing the validation logic to mirror your data structure, enabling a clear separation between the UI and validation logic.

The API is made to mimic Vuelidate's one, so migration is a breeze.

Basic example

import { useRegle } from '@regle/core';
import { required, minLength, email } from '@regle/rules';

const { r$ } = useRegle({ email: '' }, {
  email: { required, email, minLength: minLength(4), ma
 },
})

From r$ , you can build any UI around your forms fields, like displaying error messages, handling dirty fields, reseting and validating values etc...

Complete example

App.vue

<template>
  <input 
     v-model='r$.$value.email' 
    :class="{ error: r$.$fields.email.$error }" 
    placeholder='Type your email'
  />

  <li v-for="error of r$.$errors.email" :key='error'>
    {{ error }}
  </li>
</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:

Learn to use Regle

TIP

You can jump directly to core concepts to learn usage.