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 version 3.3 or higher.
• Typescript version 4.8 or higher
  • Also compatible with plain javascript.
• Text Editor with Vue syntax support.
  • VSCode is recommended, along with the official Vue extension.

Optional

• Nuxt
  • Nuxt version 3.0 or higher, and check docs for Nuxt module
• Pinia
  • Pinia version 2.1 or higher
• Zod
  • Zod version 3.0 or higher. Check Zod usage
• Valibot
  • Valibot version 1.0.0-beta.9 or higher. Check Valibot usage

pnpm

pnpm add @regle/core @regle/rules

npm

npm install @regle/core @regle/rules

yarn

yarn add @regle/core @regle/rules

bun

bun add @regle/core @regle/rules

Quick usage

App.vue

<template>
  <input 
     v-model='r$.$fields.email.$value' 
    :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>

Result:

TIP

You can jump directly to core concepts to learn usage.