JSFiddle - React, Tailwind, and code Playground

by darkylmnx

HTML

<div id="app">
  <select v-model="lang">
    <option value="fr">Français</option>
    <option value="en">Anglais</option>
     <option value="it">Italien</option>
  </select>
  <h1>{{ trans('title', { name: 'Na' }) }}</h1>
  <p>{{ trans('desc') }}</p>
</div>

Vue

const langs = {
	fr: {
  	'title': 'Salut {name}',
    desc: 'je suis le text',
  },
  en: {
  	title: `I'm the titl bitch {name}`,
    desc: 'poor it up poor it up',
  },
  it: {
  	title: 'Pizaa {name}'
  }
}


new Vue({
	el: '#app',
  data() {
  	return {
    	langs,
      lang: 'fr'
    }
  },
  methods: {
  	trans(key, args) {
    	const lang = this.langs[this.lang];
      
      if (lang == undefined) {
      	return key;
      }
      
      let text = lang[key];
      
      if (text == undefined) {
      	return key;
      }
      
      if (typeof args == 'object') {
      	Object.keys(args)
        	.forEach((one) => {
          	text = text.replace(`{${one}}`, args[one]);
          })
      }
      
      return text;
    }
  }
})