tessl/npm-vuelidate

Simple, lightweight model-based validation library for Vue.js applications

—

Pending

Overview

Eval results

Files

Plugin and Mixin Integration

Name: tessl/npm-vuelidate
Author: tessl

Core integration methods for adding validation functionality to Vue components, supporting both global plugin installation and component-level mixin approaches.

Capabilities

Vuelidate Plugin

Main Vue plugin that enables validation functionality globally across all components.

/**
 * Vue plugin that adds global validation support
 * @param Vue - Vue constructor function
 */
function Vuelidate(Vue: VueConstructor): void;

Usage:

import Vue from 'vue'
import Vuelidate from 'vuelidate'

// Install globally - adds validation support to all components
Vue.use(Vuelidate)

After installation, any component with a validations option will automatically have validation functionality.

Validation Mixin

Component-level mixin for selective validation integration without global installation.

/**
 * Vue mixin that adds validation functionality to individual components
 */
const validationMixin: {
  data(): {};
  beforeCreate(): void;
  beforeDestroy(): void;
};

Usage:

import { validationMixin } from 'vuelidate'
import { required, email } from 'vuelidate/lib/validators'

export default {
  mixins: [validationMixin],
  data() {
    return {
      name: '',
      email: ''
    }
  },
  validations: {
    name: { required },
    email: { required, email }
  }
}

Browser Integration

For direct browser usage without module bundlers.

Usage:

<script src="vuelidate/dist/vuelidate.min.js"></script>
<script src="vuelidate/dist/validators.min.js"></script>

<script>
// Install the plugin
Vue.use(window.vuelidate.default)

// Access validators
const { required, email } = window.vuelidateValidators
</script>

Validation Configuration

Component Validations Option

Define validation rules using the validations option in component configuration.

interface ComponentValidations {
  [fieldName: string]: ValidationRule | ValidationRuleSet;
}

type ValidationRule = (value: any, parentVm?: any) => boolean | Promise<boolean>;

interface ValidationRuleSet {
  [ruleName: string]: ValidationRule;
}

Example:

export default {
  data() {
    return {
      user: {
        name: '',
        email: ''
      }
    }
  },
  validations: {
    user: {
      name: { required, minLength: minLength(2) },
      email: { required, email }
    }
  }
}

Functional Validations

Dynamic validation rules using functions that can access component context.

/**
 * Function-based validations that can access component instance
 */
type FunctionalValidations = (this: Vue) => ComponentValidations;

Example:

export default {
  data() {
    return {
      password: '',
      confirmPassword: '',
      requireConfirmation: true
    }
  },
  validations() {
    const validations = {
      password: { required, minLength: minLength(6) }
    }
    
    // Conditionally add confirmation validation
    if (this.requireConfirmation) {
      validations.confirmPassword = {
        required,
        sameAsPassword: sameAs('password')
      }
    }
    
    return validations
  }
}

Lifecycle Integration

Vuelidate integrates with Vue's component lifecycle to manage validation state.

Component Lifecycle Hooks

The validation system hooks into component lifecycle events:

beforeCreate: Sets up computed $v property if validations are present
data: Initializes internal validation Vue instance
beforeDestroy: Cleans up validation instance and watchers

Reactive Integration

Validation state is fully reactive and integrates with Vue's reactivity system:

export default {
  // ... component setup
  watch: {
    // Watch validation state changes
    '$v.$invalid'(isInvalid) {
      console.log('Form validity changed:', !isInvalid)
    },
    
    // Watch specific field validation
    '$v.email.$error'(hasError) {
      if (hasError) {
        console.log('Email field has validation errors')
      }
    }
  },
  
  computed: {
    canSubmit() {
      return !this.$v.$invalid
    },
    
    firstErrorMessage() {
      if (this.$v.email.$error) {
        if (!this.$v.email.required) return 'Email is required'
        if (!this.$v.email.email) return 'Email format is invalid'
      }
      return null
    }
  }
}

Install with Tessl CLI