vee-validate
    TypeScript icon, indicating that this package has built-in type declarations

    4.5.11 • Public • Published

    codecov circleci CDNJS npm npm Bundle Size Average time to resolve an issue Percentage of issues still open


    vee-validate is a form validation library for Vue.js that allows you to validate inputs and build better form UIs in a familiar declarative style or using composition functions

    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 yarn
    yarn add vee-validate
    
    # install with npm
    npm 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

    vue Version vee-validate version Documentation Link
    2.x 2.x or 3.x v2 or v3
    3.x 4.x v4

    Usage

    vee-validate offers two styles to integrate form validation into your Vue.js apps

    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="field" :rules="isRequired" />
    
      <span>{{ errors.field }}</span>
    </Form>

    The Field component renders an input of type text by default but you can control that

    Composition API

    If you want more fine grained control, you can use useField function to compose validation logic into your component:

    import { useField } from 'vee-validate';
    
    export default {
      setup() {
        // Validator function
        const isRequired = value => (value ? true : 'This field is required');
        const { value, errorMessage } = useField('field', isRequired);
    
        return {
          value,
          errorMessage,
        };
      },
    };

    Then in your template use v-model to bind the value to your input and display the errors using errorMessage:

    <input name="field" v-model="value" />
    <span>{{ errorMessage }}</span>

    📚 Documentation

    Read the documentation and demos.

    Sponsorship

    You can help this this project by donating one time or by sponsoring via the following link

    Buy Me A Coffee

    Contributing

    You are welcome to contribute to this project, but before you do, please make sure you read the contribution guide

    Credits

    Emeriti

    Here we honor past contributors and sponsors who have been a major part on this project.

    ⚖️ License

    MIT

    Install

    npm i vee-validate

    DownloadsWeekly Downloads

    310,134

    Version

    4.5.11

    License

    MIT

    Unpacked Size

    350 kB

    Total Files

    8

    Last publish

    Collaborators

    • logaretm