Nefe is a frontend developer who enjoys learning new things and sharing his knowledge with others.
Forms are a vital aspect of web development because they enable users to interact with websites and web applications.
As web developers, it is our job to ensure that we validate the data the users send to us. The demands of handling forms can quickly become complex, repetitive, and strenuous because we have to track the user input, validate the data, display any errors, handle the form submission, and more.
Lucky for us, we can use form libraries to make the job of handling forms easier; they do the heavy lifting for us, so we don’t have to.
This article will compare two Vue form libraries, Vuelidate and FormKit. We will compare how to integrate these libraries into input fields, how they handle validation and submission, and more.
Knowledge of Vue is required for this article.
FormKit is the one-stop solution for high-end forms in Vue.js applications. It includes everything needed — labels, helper text, theming support, validation, form generation from JSON, accessibility, internationalization, and more!
Vuelidate is a simple, lightweight model-based form validation library. It is data-model oriented, meaning validation rules are added to a `validations` object in the component definition rather than being added directly to input elements in the DOM.
Run the command below to install FormKit:
Run the command below to install Vuelidate:
FormKit provides a FormKit component we can use to create text fields, email inputs, select boxes, and other types of form elements. FormKit works the same way native HTML form elements work.
Unlike FormKit, Vuelidate does not provide any custom elements, so we set up forms in Vuelidate using regular HTML form elements.
To get the inputs connected to the data, we will use a v-model on each input corresponding to their respective data.
Validation in FormKit is straightforward to work with. FormKit comes with pre-written validation rules, which we can declare in the FormKit component through its validation prop.
As of this writing, there are 22 pre-written rules available.
Not only does FormKit provide a developer-friendly API for handling validation, but it also handles the tracking and displaying of errors for us.
Unlike FormKit, Vuelidate separates its validation package from its core package, so we need to install it to validate forms.
npm install @vuelidate/validators
Similar to FormKit, Vuelidate comes with several built-in validators. Some of the basics include:
- required – value cannot empty
- minLength/maxLength – provides a min or max length for a value
- email – value must be a valid email address format
- alpha – value only accepts the alphabet
- numeric – value only accepts numbers
With Vuelidate, we are responsible for tracking and conditionally displaying the errors that exist on each input field.
The parent FormKit component tracks the validation state of its children's input fields and ensures they are all valid before submitting. It also disables all inputs while the submission is pending.
You will notice that there is no submit button in the template; this is because FormKit comes with a submit-label attribute we can pass a value to. When we do that, it will automatically render a submit button for us.
There is no submit button in the template because FormKit comes with a submit-label attribute to which we can pass a value. It will automatically render a submit button for us when we do that.
Unlike FormKit, we have to add a submit button to the template explicitly. Also, Vuelidate does not automatically track the submission state, so we must attach a click event to the submit button.
Vuelidate does not track if there are errors present, so we have to check if there are any errors in the submitForm.
FormKit is a relatively new library, which was recently released, and as of this writing, it is currently in a public beta. We may want to consider this before deciding to integrate FormKit into our projects.
Also, being a new library, FormKit is not yet well-known in the Vue community. This means that we may not see much developer-related content such as YouTube videos, blog posts, or code snippet demos like we would see with popular libraries.
Compared to FormKit, Vuelidate is a well-established library, having been released for years. It is popular among web developers in the Vue ecosystem, and developers have created a lot of content for it.
Also, as a mature library, it has been battle-tested in production-grade applications.
FormKit has detailed and efficient documentation, which is also easy to navigate.
The documentation covers several use-cases and provides real-world examples.
Also, the documentation comes with a built-in editor which we can interact with; this makes it easier to learn FormKit and hit the ground running with it.
What FormKit may lack in developer-related content and popularity, it makes up for with its very detailed documentation.
Vuelidate has comprehensive documentation that is easy to understand and comes with several examples.
Also, it has been around longer than FormKit, which means it has more content in the form of blog posts, YouTube videos, and other developer-generated content built around it.
Formik is 111.1kb minified, and 30.7kb gzipped.
Vuelidate is 74.6kb minified, and 26.1kb gzipped. While smaller than FormKit, this is only the core package. Together with its validate package, Vuelidate becomes 149.1kb minified and 56.8kb gzipped, which can make websites load slower.
Which library should you use for your next Vue application? As with a lot of questions when it comes to web development, my answer is ‘it depends.’ There is no one-size-fits-all library that will suit every use case and project.
I found FormKit to be more beginner-friendly compared to Vuelidate. Its developer-friendly API is a strong selling point, and I love the fact that it has an interactive documentation and playground. I believe these make it easier for Vue developers of every level to get started with it quickly.
Get visual proof, steps to reproduce and technical logs with one click
In this article, we will learn about FormKit, its features, and how it enables us to handle forms.
Learn all of Nuxt3's new unique features and its installation process.
Try Bird on your next bug - you’ll love it
Julie, Head of QA
Try Bird later, from your desktop