Creating a simple Vue pluralize filter
Karolis
Posted on September 7, 2019
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
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)
})
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) }}
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!
Posted on September 7, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.