fengmk2/regle

Regle is a form validation library for Vue 3 that makes it easy to check whether user input is correct, like ensuring an email field actually contains an email, or a password meets minimum length requirements. Instead of building validation logic scattered throughout your components, Regle lets you define all your rules in one place and then use them everywhere. The way it works is "headless," which means it doesn't come with pre-built form components or styling. Instead, it gives you the validation logic and error messages, and you decide how to display them. You write your form HTML however you want, using any CSS framework, design system, or custom styles, and plug Regle's validation into it. This flexibility means you're never locked into a particular look or feel. You define your data model (like an email field or password field), attach validation rules to each field, and Regle handles checking whether the input is valid, tracking error messages, and managing the state of whether the form has been touched or submitted. Regle is particularly useful for developers building Vue 3 applications who want type-safe validation with full autocompletion in their code editor. It's inspired by an older library called Vuelidate but modernized for today's Vue ecosystem. It also supports async validation (useful for things like checking if a username is already taken on a server), works with Nuxt for full-stack apps, and integrates with popular validation libraries like Zod if you prefer writing your validation rules in a different style. The library includes handy debugging tools built into Vue's developer extension, so you can inspect validation state while building. It also works on both client and server-side rendering setups. Whether you're building a simple contact form or a complex multi-step form with conditional validation, Regle handles the validation plumbing so you can focus on the user experience.