A poorly designed form can turn visitors away from your site. Luckily for Vue developers, there are tons of Vue input libraries available to make prettying up your forms a breeze.
There are several benefits to having an intuitive and user-friendly form, including
- Higher conversion rate
- Better user experience
- More professional branding
Like every other major framework, there are tons of community solutions for building beautiful Vue.js forms. From simple text inputs all the way to advanced phone number templates, there are so many options for your forms.
Here are some of my favorite Vue Input Libraries. While, this list is just about form elements, I’ve compiled a list of Vue icon libraries too.
I hope you find these tools as useful as I do!
1. Vue Select
<select> elements is a huge part of any form. But if you have experience doing this, you'll know that they can be a real pain to customize.
Luckily, Vue Select, a library by Jeff Sagal provides an intuitive way to add features like
It’s easy to use and I’ve definitely used it across several projects.
2. Vue Input Tag
Allowing site visitors to add their own tags is a common feature that forms want. However, implementing your own flexible system can be tricky — especially for people new to Vue.
The Vue Input Tag library is a great way to add a powerful feature to your forms.
3. Vue Dropdowns
Vue Dropdowns is another library that handles
<select> elements. Not only does it create sleek inputs, but it also provides a great way to set data and listen to events such as
With a simple setup, it’s definitely a great way to make your forms look prettier with minimal effort.
4. Vue Color
Vue Color is a simple way to add color selection into your forms. Implementing one of these systems from scratch takes hours of planning and work, but using Vue Color takes just a few minutes.
This library also is highly customizable.
It comes with several different styles, event hooks, and support for different color formats. I definitely recommend Vue Color for adding some next level customizability to your app.
5. VueJS Date Picker
VueJS Date Picker is one of the cleanest date picker libraries that I’ve seen. It gives you a calendar view that allows users to click around to select a date.
In my opinion, it’s very professional looking and is also extremely customizable. In fact, it has dozens of easy-to-edit props and events tto perfectly match your use case. However, I think the default setup is also great for a majority of projects.
But don’t take my word for it, check out this screenshot from the Vue DatePicker demo.
6. Vue Switches
Switch inputs are a beautiful way to create toggled options — they’re sleek, intuitive, and can be modified to match virtually any app’s style.
Vue Switches is an amazing library for creating beautiful switch inputs. With a variety of themes and the ability to customize colors and text, it’s a flexible solution for your forms.
7. Vue Dropzone
Vue Dropzone provides dozens of custom props and events that allow you to tweak its functionality to your specific projects. But regardless if you choose to modify it or not, it’s a simple, yet powerful tool to add to your forms.
8. Vue Circle Sliders
Vue Circle Sliders are a great way to add a little flair to your forms. Different than a typical, linear slider input — circle sliders can feel more natural depending on the values you’re collecting.
I love this library because it’s so versatile. It supports touch controls, allows you to set max/min values, and even lets you control the step size of your slider.
Overall, this is a really cool option to consider to add some more style to your Vue applications.
9. Vue Phone Number
Without using any libraries, it can get a little tricky collecting phone numbers. You’d have to worry about formatting, country codes, etc.
The Vue Phone Number library takes care of everything and comes with a beautiful UI that looks professional and secure, two factors that will increase the conversion rate of your forms.
It’s also extremely flexible and you can customize several features, including
- Valid Country Codes
- Theme and Colors
- Phone Number Formatting
While this is by no means a complete list of Vue input libraries, these 9 that I’ve listed have helped me save so much time while developing projects. Plus, I think they’re all simple ways to power up your forms with advanced features.
I hope you discovered some new tools that you can incorporate into your Vue projects.
What are some of your favorite input libraries? I’d love to hear from you!
If you’re looking to power up your Vue development, I’ve created a 3 page PDF cheatsheet with all of the essential references that every Vue developer needs. It’s saved me so much time and thousands of the same Google searches.
Originally published at https://learnvue.co on January 25, 2020.