
Painless Vue forms
Features
- 🍞 Easy: Declarative validation that is familiar and easy to setup
- 🧘♀️ Flexible: Synchronous, Asynchronous, field-level or form-level validation
- ⚡️ Fast: Build faster forms faster with intuitive API and small footprint
- 🏏 Minimal: Only handles the complicated form concerns, gives you full control over everything else
- 😎 UI Agnostic: Works with native HTML elements or your favorite UI library components
- 🦾 Progressive: Works whether you use Vue.js as a progressive enhancement or in a complex setup
- ✅ Built-in Rules: Companion lib with 25+ Rules that covers most needs in most web applications
- 🌐 i18n: 45+ locales for built-in rules contributed by developers from all over the world
Getting Started
Installation
# Install with yarnyarn add vee-validate# Install with npmnpm install vee-validate --save
Vue version support
The main v4 version supports Vue 3.x only, for previous versions of Vue, check the following the table
Usage
vee-validate offers two styles to integrate form validation into your Vue.js apps.
Composition API
If you want more fine grained control, you can use useField
function to compose validation logic into your component:
<script setup>// MyInputComponent.vueimport { useField } from 'vee-validate';const props = defineProps<{ name: string;}>();// Validator functionconst isRequired = value => (value ? true : 'This field is required');const { value, errorMessage } = useField(props.name, isRequired);</script><template> <input v-model="value" /> <span>{{ errorMessage }}</span></template>
Then you can you can use useForm
to make your form component automatically pick up your input fields declared with useField
and manage them:
<script setup>import { useForm } from 'vee-validate';import MyInputComponent from '@/components/MyInputComponent.vue';const { handleSubmit } = useForm();const onSubmit = handleSubmit(values => { // Submit to API console.log(values); // { email: 'email@gmail.com' }});</script><template> <form @submit="onSubmit"> <MyInputComponent name="email" /> </form></template>
You can do so much more than this, for more info check the composition API documentation.
Declarative Components
Higher-order components are better suited for most of your cases. Register the Field
and Form
components and create a simple required
validator:
import { Field, Form } from 'vee-validate';export default { components: { Field, Form, }, methods: { isRequired(value) { return value ? true : 'This field is required'; }, },};
Then use the Form
and Field
components to render your form:
<Form v-slot="{ errors }"> <Field name="email" :rules="isRequired" /> <span>{{ errors.email }}</span></Form>
The Field
component renders an input
of type text
by default but you can control that
📚 Documentation
Read the documentation and demos.
Contributing
You are welcome to contribute to this project, but before you do, please make sure you read the contribution guide.
Credits
- Inspired by Laravel's validation syntax
- v4 API Inspired by Formik's
- Nested path types by react-hook-form
- Logo by Baianat
Emeriti
Here we honor past contributors and sponsors who have been a major part on this project.