vuelidate

Simple, lightweight model-based validation for Vue.js

Visit Vuelidate Docs for detailed instructions.

Installation

You can use Vuelidate just by itself, but we suggest you use it along @vuelidate/validators, as it gives a nice collection of commonly used validators.

npm install @vuelidate/core @vuelidate/validators
# or
yarn add @vuelidate/core @vuelidate/validators

Usage

// main.js

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'
import { VuelidatePlugin } from '@vuelidate/core'

Vue.use(VueCompositionApi)
Vue.use(VuelidatePlugin)

Then you can use it in all components

import { email, required } from '@vuelidate/validators'

export default {
  name: 'UsersPage',
  data: () => ({
    form: {
      name: '',
      email: ''
    } 
  }),
  validations: {
    form: {
      name: { required },
      email: { required, email }
    } 
  }
}

You can now access $v.form to see all the validation statuses of each validator.

For more info, visit the Vuelidate Docs.

Development

To test the package run

yarn test:unit

To link the package run

yarn link

To build run the package, run:

npm run build