vue-translater

Description

vuejs package helps you intergate translation with vuejs apps.

Getting Started

npm i vue-translater

Usage

Use vue-translater with your vue instance :

import Vue from 'vue';
import VueTranslater from 'vue-translater';
 
let options = {
  name: 'storageItemName',
  translate: {
    en: {
      'hello': 'hello',
      'developer': 'developer'
    },
    fr: {
      'hello': 'bonjour',
      'developer': 'développeur'
    },
    es: {
      'hello': 'hola',
      'developer': 'desarrollador'
    }
  }
};
 
Vue.use(VueTranslater, options /* optional */);

Direct access from vue instance

this.$trans

Or by v-trans directive.

you can set your json object that contain all key: value translation :

this.$trans.set(transObject)

transObject may be like :

{
  langIsoCode1: {
    keyword: "ValueLang1"
  },
  langIsoCode2: {
    keyword: "ValueLang2"
  }
}

Inside you vue component :

<label v-trans="'keyword'"></label>
<!-- Or -->
<label v-trans.keyword></label>

For html tags attributes you can do it like :

<!-- 
  this use case takes an array with two elements, 
  the first one take the string and the second take the arguments 
-->
<label v-trans.alt="[`my :attr account`, ['github']]"></label>
<!-- 
  for multiple slots in the same string 
  you should set the values in second array in order with `:attr` in your string
-->
<label v-trans.alt="[`my :attr account has total of :attr packages`, ['github', 30]]"></label>
<!-- and the sample use case is like -->
<label :alt="$trans.get(`my :attr account`,['github'])"></label>

For multiple attributes in the same html tag you can do it like :

<label  
  v-trans.attributes="{
    alt: { 
      text: `my :attr account`, 
      values: ['github'] 
    },
    title: { 
      text: `my :attr title`, 
      values: ['label'] 
    }
  }">
</label>

these example will be converted to ( displayed value is based on active language )

<label>ValueLang1</label>

inside vue instance :

this.$trans.get('keyword')

languages

To active a specific language :

this.$trans.setLang(langIsoCode)

To get the active language :

this.$trans.getCurrentLang()

To get all registred languages :

this.$trans.getAvailableLanguages() // this will return all isoCode Languages set on translateObject