Vuelidate typings

validators.d.ts

// build your own rule
declare module 'vuelidate/lib/validators' {
    import Vue from 'vue'

    export interface Params {
        type: string
    }

    export interface ValidationParams {
        readonly name: string
        readonly params: Params
        readonly path: string[]
    }

    // const ValidationRule
    export interface ValidationRule {
        $params(): ValidationParams
        $pending(): boolean
    }

    export type CustomRule = (value: any, parentVm?: Vue) => boolean

    export interface Helpers {
        withParams(params: Params, rule: CustomRule): ValidationRule
        req(field: string): ValidationRule
    }

    export const helpers: Helpers
    
    // pre-defined rules
    export function required(): ValidationRule
    export function requiredIf(field: string): ValidationRule
    export function requiredUnless(field: string): ValidationRule
    export function minLength(length: number): ValidationRule
    export function maxLength(length: number): ValidationRule
    export function minValue(min: number): ValidationRule
    export function maxValue(max: number): ValidationRule
    export function between(min: number, max: number): ValidationRule
    export function alpha(): ValidationRule
    export function alphaNum(): ValidationRule
    export function numeric(): ValidationRule
    export function email(): ValidationRule
    export function ipAddress(): ValidationRule
    export function macAddress(): ValidationRule
    export function sameAs(field: string): ValidationRule
    export function url(): ValidationRule
    export function or(...validators: ValidationRule[]): ValidationRule
    export function and(...validators: ValidationRule[]): ValidationRule
}

vuelidate.d.ts

declare module 'vuelidate' {
    import Vue, { PluginFunction } from 'vue'
    
    import { Params, ValidationRule, ValidationParams } from 'vuelidate/lib/validators'
    export { Params, ValidationRule, ValidationParams } from 'vuelidate/lib/validators'
    
    /**
     * Covers beforeCreate(), beforeDestroy() and data().
     *
     * No public members.
     */
    export const validationMixin: any
    
    // const Validation
    export interface Validation extends Vue {
        // const validationGetters
        readonly $invalid: boolean
        readonly $dirty: boolean
        readonly $error: boolean
        readonly $pending: boolean
        readonly $params: { [attr: string]: any }
    
        // const validationMethods
        $touch(): never
        $reset(): never
        $flattenParams(): ValidationParams[]
    }
    
    
    // vue plugin
    export const Vuelidate: PluginFunction<any>
    
    export default Vuelidate
    
    // vue augmentation
    
    type ValidationDecl = ValidationRule | ((...args: any[]) => ValidationRule)
    
    interface FlatValidationDecl {
        [attr: string]: ValidationDecl
    }
    
    interface NamedValidationDecl {
        [rule: string]: ValidationDecl | FlatValidationDecl | NamedValidationDecl
    }
    
    interface NestedValidationDecl {
        [attr: string]: ValidationDecl | FlatValidationDecl | NamedValidationDecl | NestedValidationDecl
    }
    
    interface ValidationGroupDecl {
        validationGroup?: string[]
    }
    
    type ValidationDecls = ValidationDecl | FlatValidationDecl | NamedValidationDecl | NestedValidationDecl | ValidationGroupDecl
    
    module 'vue/types/vue' {
        interface Vue {
            $v: { [attr: string]: Validation } & Validation
    
            delayTouch(v: Validation): undefined
    
            validations(): ValidationDecls
        }
    }
    
    module 'vue/types/options' {
        interface ComponentOptions<V extends Vue> {
            validations?: ValidationDecls
        }
    }
}
    

Which Vue validation library is easy to implement. I tried to use Vee Validate on my website, but didn't get it to work. Maybe I was doing something wrong, but for someone who is a beginner, it was not that easy.