Creating a simple Vue pluralize filter

krusenas

Karolis

Posted on September 7, 2019

Creating a simple Vue pluralize filter

There are many options how to create a pluralize function but in Vue you should probably use filters. Let's create one as it's always handy to have one.

Step 1: Add pluralize package

Let's use https://github.com/blakeembrey/pluralize to do the heavy lifting:

yarn add pluralize
Enter fullscreen mode Exit fullscreen mode

Step 2: Register filter

Our pluralize filter will take two arguments - first one is the left variable in the filter and second is the filter function argument (depends on your code structure, but it's usually main.js or a dedicated filters file):

// .. your other imports
import pluralize from 'pluralize'

// .. your other code

Vue.filter('pluralize', function (value, number) {
  return pluralize(value, number)
})
Enter fullscreen mode Exit fullscreen mode

Step 3: Use the filter!

Now, to use the filter on the left we give it the word we want to pluralize and as an argument we pass the count:

{{ tunnels }} {{ 'tunnel' | pluralize(tunnels) }}
Enter fullscreen mode Exit fullscreen mode

That's it :) Now, based on tunnels variable it will be either '1 tunnel' or '50 tunnels'.

I hope this will be useful to you once you need it!

💖 💪 🙅 🚩
krusenas
Karolis

Posted on September 7, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related