Lightweight, type-safe form validation library for Vue 3 that leverages Vue's reactivity system to provide a seamless and flexible way to manage form state and validation without depending on strings to link inputs to the form.
npm install @vue-reactive-form/coreLightweight, type-safe form validation library for Vue 3 that leverages Vue's reactivity system to provide a seamless and flexible way to manage form state and validation withut depending on strings to link inputs to the form.
š Get started in minutes ā no boilerplate, no learning curve. Just reactive forms that work.
Check out the live demo for a hands-on example of how to use vue-reactive-form.
- Lightweight ā Minimal footprint, designed to focus on form state and validation without unnecessary bloat.
- Type Safety ā Built with TypeScript, ensuring your form values and validation rules are fully typed for a superior developer experience.
- Standard Schema Validation ā Supports Standard Schema validation, making it compatible with libraries like Yup, Zod, and Valibot out of the box.
- Headless & UI Agnostic ā Provides core form logic and state management without enforcing any UI components or styles. Seamlessly integrates with any UI library or custom design system.
``bash`
npm install @vue-reactive-form/coreor
pnpm add @vue-reactive-form/coreor
yarn add @vue-reactive-form/core
Here is a simple example of how to use vue-reactive-form to manage form state.
`vue
`
Each form field exposes a $control object that provides:
- state.value ā The current value of the field (reactive)errorMessage.value
- ā The validation error message (if any)touched
- / dirty ā Track user interaction with the field
You can easily integrate validation libraries like Yup. vue-reactive-form supports @standard-schema/spec, making it compatible with many popular validation libraries.
`vue
``
Contributions are welcome! Feel free to open an issue or submit a pull request if you have ideas for improvements or find any bugs.
The package is published under the MIT license.