VueJS CSV input

This is a very short post about a nice VueJS component I’ve written recently.

I’ve just been working on Yummit.co’s “Add Product” flow of screens. We’ve been refining the User Interface for this lately. We’re giving the user’s the ability to add multiple ingredients or cuisines to a product.

Previously we gave the users an input and a button saying “Add”. The user would have to fill out the input, click the add button and then repeat for all the values they wanted to add. This felt clunky and we’ve been wanting to streamline the experience.

We’re now allowing users to enter CSV (Comma Separated Values) into a single input, and to build an array of values (which is what the API accepts). This keeps the client side implementation very clean as turning the CSV string into an array allows us to play with the correct data type for this information. If we didn’t convert this to an array, we’d have loads of hacks when displaying the values and it would get very messy very quickly.

As this control will be re-used (has a few very small variations for other data items of a product), I’ve made it into a Vue Component.

I’ve been loving VueJS recently

Coming from #AngularJS and using @vuejs is such a step up. AngularJS was good in its day, however Vue correct's Angular's mistakes and is so so elegant! The more I use it, the more I love it!
— Ryan Southgate (@ryan_southgate) March 21, 2018

Here is a stripped down version of the component I’ve written for Yummit… It’s configurable; it allows you to specify the maximum number of items a user can input, and defaults to 99 if not specified. It also allows you to specify the separator too!

See the Pen VueJS CSV input by Ryan Southgate (@ryansouthgate) on CodePen.

If you have any questions/improvements, then get in touch in the comments or on Twitter