Install & Download:
pnpm install @regle/core @regle/rules
# or
yarn add @regle/core @regle/rules
# or
npm install @regle/core @regle/rulesDescription:
Regle is a headless model-based form validation library for Vue 3 that executes validation logic directly against your data model.
The library validates forms through a reactive API that connects rules to model properties. You write validators that attach directly to your data fields. Regle tracks validation states, error messages, and async operations through computed properties.
Features
- 🎯 Type Safety: Full TypeScript inference across validation rules, error states, and form values with complete autocompletion support.
- 🌳 Model-Based Structure: Validation tree matches your data model exactly with nested objects and arrays.
- 🔍 Vue Devtools Extension: Built-in extension displays validation states, rule execution, and error tracking during development.
- 🤖 MCP Server: Model Context Protocol server provides documentation lookup and autocompletion support.
- 🎨 Style Agnostic: Works with Tailwind CSS, Bootstrap, Material UI, plain CSS, or any styling approach.
- 📦 Modular Design: Extend the core library with custom properties and validation rules.
- 🔄 Async Validation: Handle API calls, database checks, and remote validation with built-in pending state management.
- 🌐 i18n Integration: Connect error messages to any internationalization library or custom translation system.
- 📕 Vuelidate API Compatibility: Familiar API structure with improved type safety and validation control.
- ⚡️ SSR Support: Full compatibility with Nuxt and other server-side rendering frameworks.
- ✅ Standard Schema Support: Validates forms using Zod, Valibot, and ArkType through the Standard Schema specification.
Use Cases
- Admin Dashboards: Build complex data entry forms with nested validation rules that match entity relationships in your database schema.
- Multi-Step Forms: Validate user registration flows, checkout processes, and application forms with progressive validation across multiple screens.
- Dynamic Forms: Handle forms with conditional fields, repeating sections, and validation rules that change based on user selections or loaded data.
- Enterprise Applications: Implement consistent validation patterns across large codebases with shared rule definitions and centralized error handling.
How to Use It
1. Install the core library and rule packages through your package manager.
pnpm install @regle/core @regle/rulesnpm install @regle/core @regle/rulesyarn add @regle/core @regle/rules2. Import the useRegle composable and validation rules. Pass your form data model and validation rules to the composable. The return value contains the validation state object.
<script setup lang="ts">
import { ref } from 'vue';
import { useRegle } from '@regle/core';
import { required, email, minLength } from '@regle/rules';
const form = ref({
email: '',
password: '',
username: ''
});
const { r$ } = useRegle(form, {
email: {
required,
email
},
password: {
required,
minLength: minLength(8)
},
username: {
required,
minLength: minLength(3)
}
});
</script>Related Resources
- Vuelidate: Original Vue validation library that inspired Regle’s API design.
- VeeValidate: Alternative Vue form validation library with template-based approach.
- Formkit: Complete form framework for Vue with built-in validation and UI components.
- Zod: TypeScript schema validation library compatible with Regle through Standard Schema support.
- reglejs.dev: Visit Regle’s official documentation for more examples and usages.
FAQs
Q: Can I use Regle with existing Vuelidate code?
A: Regle follows a similar API structure to Vuelidate. You need to update imports from @vuelidate/core to @regle/core and adjust some property names. The validation rules work similarly but Regle adds full TypeScript inference.
Q: How do I customize error messages?
A: Return custom error messages from validation functions instead of boolean values. You can also connect error messages to i18n libraries by transforming the error values. Access the raw validation results and map them to translated strings based on your application’s locale settings.
Q: Does Regle work with Nuxt?
A: Regle supports server-side rendering environments including Nuxt. The validation logic runs on both client and server. You can validate forms during SSR and maintain validation state during hydration. The library handles reactive state correctly in universal applications.
Q: How do I validate fields only after user interaction?
A: Check the $dirty property before displaying errors. This property becomes true after the user modifies a field. Combine it with the $error property to show validation feedback only after interaction. Call the $touch() method manually to force validation display when needed.
Q: Can I validate arrays with dynamic lengths?
A: Use the $each property in your validation rules to validate array items. The validation state automatically updates as you add or remove items. Access validation results for specific array indexes through the $each property on the field state. Each item gets its own validation context with all standard properties.
