JSFiddle - React, Tailwind, and code Playground

by escapedcat

HTML

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>

<div id="app">

  <p
     v-translate='{count: oneItem}'
     :translate-n="oneItem"
     translate-plural="%{ count } ITEM"
     >
    %{ count } ITEM
  </p>

  <p
     v-translate='{count: multipleItems}'
     :translate-n="multipleItems"
     translate-plural="%{ count } ITEM"
     >
    %{ count } ITEM
  </p>

</div>

JavaScript

Vue.use(VueGettext, {translations: {
	"en_US": {
  	"%{ count } ITEM": [
      "One Car",
      "%{ count } Cars"
    ],
   }
}});

const app = new Vue({
	data: {
  	oneItem: 1,
  	multipleItems: 10,
  },
}).$mount('#app');