Building Forms with Vue.js

Creating validation rules

When we added Vuelidate to our project through Vue.use, the library added a new reserved property that we can use on our components: validations.

This property is added onto the configuration object for the component, alongside data(), computed, and so on. It will also be an object that holds a property of its own for each input that we want to validate.

Let's create this property and set up a new input, without a custom component wrapper to test. Once we understand the basics, we can work on translating all of this into our BaseInput and BaseSelect components.

Follow these steps in order to create validation rules:

1. Create a new <input> form below the telephone object of BaseInput in App.vue:

<input type="text" ...