Tarik Hamilton

Arrays as Oxford Comma Formatted Lists using Vue.js Filters

This video is for any Vue.js user. I personally didn’t think to use filters in this way. This video doesn’t go over filter basics.

Formatting sentences from arrays isn’t like typical¬†list rendering. Having your template output a list in a sentence looks ugly and don’t get me started on trying to add logic for commas.

The ugly example above doesn’t even support conjunctions. Imagine how much of a nightmare it would be to add that. But how does this new template look?

My Filter For Use!

Pretty nice, right? It describes what it does, it keeps the template clean, and you can chain the filters. You can even get fancier and add parameters to your filters. Feel free to use my code below. In the video, I walk through the steps and logic of creating it. From there you can probably add ways to change the conjunction or other options.

Hope this helps! Till next time!