9 Vue Input Libraries to Power Up Your Forms

Matt Maribojoc
Jan 25 · 5 min read
Photo by Kelly Sikkema on Unsplash

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

Working with <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 change and blur.

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 is a drag and drop file upload library. In the past few years, drag and drop file uploads have been becoming more widespread and they’re an easy way to make your app feel modern.

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

Wrapping Up

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.

JavaScript in Plain English

Learn the web's most important programming language.

Matt Maribojoc

Written by

I run a VueJS community over at https://learnvue.co, develop web sites, and post whatever I find cool on the Internet.

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

How to Secure Your API With JSON Web Tokens

More from JavaScript in Plain English

More from JavaScript in Plain English

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade