How I created Validation Package with help of Composable fn in Vue?

Hi reader,
This blog is about implementation of validation package with help of composable functions in Vue. You may want to read how to use it in the following blog:
https://dev.to/yogeshgalav7/vue-nice-validate-1bd7

This post is improvement to my last post
https://dev.to/yogeshgalav7/create-validation-plugin-in-vue-1flf
In last post I created validation package in vue2 with help of mixins, but since mixins are depreciated and vue3 suggest to make everything composable so learn and implemented the same package with help of composable functions.

Why I created this Package

As I'm finding for better solution to validate my fields in Vue.
Vuelidate is extremely difficult to use but there are very less alternatives available as a validation library vue. This makes me very sad as a passionate Vue developer so I'm trying hard to create better package of mine.
In Vuelidate you have to write $v and $model against each of the model value which is kind of overcode. Also we have to define validation rules separately in long format.
The alternative VeeValidate was earlier good but now has grown to Vue framework which is again very bad for the Vue community, our company has to forcefully shift to Vuelidate from VeeValidate.

What are Composable functions

• Earlier in Vue2 we use write mixins which were just vue components to be get mixed up with any other component using it, now problem with them was what code need to be executed first what need to be executed after.
• In short that was not the proper way of reusing the code.
• Composable function is writing style or architecture of how js functions can be used in reusable way.
• Suppose we have a variable count and a function counter which increases count, we import counter function and use it in two different files or components. What do you think will happen when we will use counter and increase the value of count through it. Will the value of count be same for both files or different, hence increment differently?

let count = 0;
export default function counter(){ count++; } 

• Here count will act as common state and will be same for both files. Now how to use counter in reusable way so it act as separate function or state for each file we use it in?
• We will envelop our count and counter code in outer function to be called as useCounter

export default function useCounter(){
  let count = 0;
  function counter(){ count++; }
}

Now this useCounter is composable function and is reusable because each time we call this function it creates new or individual copy of count and counter.

What do we need for validation

Let's see what things(variables and functions) do we need for validating our forms. We will return this things from our main composable function. Let's name this main function as useVueNiceValidate()

export default function useVueNiceValidate() {
    const validationFields = reactive<TValidationField[]>([]);
    const formErrors = reactive<TFormErrors>({});

    const { vValidate } = useDirective(validationFields);
    const {validationRules, addValidationRules} = useValidationRules();

    const { addValidationFields } = useValidationField(validationFields);
    const { validateForm } = useFormValidator(validationFields, formErrors, validationRules);

    return {
        validationFields,
        formErrors,

        vValidate, 

        addValidationFields,

        addValidationRules,

        validateForm,

        addValidationMessages
    }
}

Let's understand this things one by one

1. validationFields: This is the reactive array containing all necessary info of fields to be validated. The info or object includes properties like field id, field name, associated rules etc.
2. formErrors: This reactive object will contain first error for each validationField, if any. The key will be field_id and value will be error message.
3. vValidate: This is the custom directive which will collect all info about input fields to be validated through template and update them in validationFields array.
4. validateForm: This is the function we will call at run time in our component to check if all validationFields inside form are valid or not.
5. addValidationFields: You can use this function in case you want to add validationFields via object format instead of via directive.
6. addValidationRules: You might wanna add some custom rules of your own, for that you can use this.
7. addValidationMessages: If you want custom message for any field in any page for any particular rule, you can use this function.

How it will work

Now that we have declared all of our entities, Let's understand the process

1. useDirective: it will read all field in template mentioned with v-validate and add, update the validationFields array passed as an argument to it.
2. useValidationRules: it will return set of rules predefined and a function addValidationRules to add new custom rule as well.
3. useValidationField: this composable provides more function like addField, updateField but they are used by useDirective composable. For here we will only expose and export addValidationFields to add fields in object format without use of directive.
4. useFormValidator: This composable will take validationFields run validation operation over them with mentioned rule, this rules will be taken from validationRules and if any rule fails for particular field it will insert error into formErrors. Hence it is main function(composable) of our main function(composable).

Deep Dive

If you liked till now, let' dive deep into the code.
https://github.com/yogeshgalav/vue-nice-validate
😅😂😂
You did not expect that did you?
More and more code can be inserted inside this composable so I can not explain that all here, It's better to go through of your own.
The main concept was this much only.

Thank you for reading my post, If you validator, Please create some issue if you find any, Waiting for more collaborators to work with. I'm also open to job opportunities currently, so please refer to one if you have any.

Thanks and Regards,
Yogesh Galav