In this episode, we dive into filters in Vue.js 2.0 — or rather, what to do now that they've been removed from the framework! If you've worked with Vue before, you might remember filters as a really handy way to, for example, pluralize a like count directly in your template — showing "1 like" vs. "2 likes". With their removal, though, that nice, clean syntax is gone, so what now?
First, we look at how things used to work and see the classic "fail to resolve filter" error. Then, I show you how to handle the pluralization use case by pulling in the pluralize
npm package. We walk through importing the library, using it in our component's methods, and making the pluralization happen right where we need it.
Next, if you don't want to bring in an external package, we see how easy it is to make your own filter-like functions. I show you how to make a basic greeting
function in a separate filters.js
file and bring it into any component you like. Just import, call it from your template, and you have the same effect you'd get from the old-style filters.
So, whether you're dealing with like counts or any bit of text transform, this episode covers how to keep your Vue 2 apps clean and readable, even with filters out of the picture.