Introduction

Regle (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 to simple or complex Form. It's all data-based and headless, the validation matches the data structure so you can separate UI and validations.

Declare your form rules inside a component or a Pinia store and use it wherever you like.

Installation

Prerequisites

• Vue version 3.1 or higher.

• Text Editor with Vue syntax support.

  • VSCode is recommended, along with the official Vue extension.

• If you're using Nuxt

  • Nuxt version 3.0 or higher, and check docs for Nuxt module

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='state.email' placeholder='Type your email'/>
  <ul>
    <li v-for="error of 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 {errors, state} = useRegle({email: ''}, {
  email: {required, minLength: minLength(4), email}
})

</script>

Result: