Vue.js pluralize filter

App.vue

<template>
  <div>
    <p>I got {{ amount }} {{ 'cookie' | pluralize(amount) }}</p>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
  export default {
    data: () => ({
      amount: 5
    }),
    
    methods: {
      decrement () {
        this.amount--
      }
    }
  }
</script>

main.js

import Vue from 'vue'

Vue.filter('pluralize', (word, amount) => (amount > 1 || amount === 0) ? `${word}s` : word)

new Vue({render: create => create(App)}).$mount('#app')

It's worth noting there are complete packages available such as https://www.npmjs.com/package/pluralize weighing in at ~18kb which will handle everything thrown at it includes some other useful features such as testing whether a word is singular or plural.

There's also an interesting solution over on SO: https://stackoverflow.com/a/57129703/10074973 but that will require additional work as it doesn't cover all special cases, meaning the former may be preferable.

I decided to do it the more manual way with:

Vue.filter('pluralize', (amount, singular, plural) => (amount > 1 || amount === 0) ? plural : singular)

so that I can use it like this:

<p>I got {{ amount }} {{ amount | pluralize('cookie', 'cookies') }}</p>

This is not very different from going completely manual but still saves a few strokes and ensures proper pluralization without adding more packages.

@iSWORD to make it even simpler to use:

Vue.filter('pluralize', (amount, singular, plural = null) => {
  if (plural === null) {
    plural = `${singular}s`;
  }
  return (amount > 1 || amount === 0) ? plural : singular;
});

Then if the word pluralizes "normally" you can just exclude the third argument:

// NOTE: Not how you actually use this, just using it as a normal function for example purposes
pluralize(1, 'cookie'); // => cookie
pluralize(2, 'cookie'); // => cookies
pluralize(1, 'octopus', 'octopi'); // => octopus
pluralize(2, 'octopus', 'octopi'); // => octopi

And while we're at it...

Vue.filter('pluralize', (amount, singular, plural = `${singular}s`) => amount === 1 ? singular : plural);