Skip to content

Type safe model-based form validation library for Vue.js

License

Notifications You must be signed in to change notification settings

vad1ym/regle

 
 

Repository files navigation

regle cover

npm version npm download npm download

Regle

Regle \ʁɛɡl\ (French word for 'rule' ) is a type-safe model-based form validation library for Vue 3.

It's heavily inspired by Vuelidate.

📚 Documentation

Documentation

🎮 Play with it

Playground

Simple demo Advanced Demo
Open in StackBlitz Open in StackBlitz

🧰 Features

  • 🤖 100% type inference
  • 📖 Model based validation
  • 🪗 Extensible
  • 🛒 Collection validation
  • 🦸‍♂️ Zod support
  • 🤖 Valibot support
  • 🪶 Light(~7kb gzip) and 0 dependencies

🫶 Credits

  • 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

Example

<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>

Compatibility:

  • vue Vue 3.3+
  • nuxt Nuxt 3
  • pinia Pinia
  • 🦸‍♂️ Zod
  • 🤖 Valibot

⬇️ Quick install

pnpm install @regle/core @regle/rules
# or
yarn add @regle/core @regle/rules
# or
npm install @regle/core @regle/rules

📑 License

MIT License

About

Type safe model-based form validation library for Vue.js

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 89.9%
  • Vue 9.3%
  • JavaScript 0.8%