Vue-Polyglot

basic translation plugin for VueJS 2+.

View demo Download Source

Installation

npm install --save vue-polyglot

TLDR

  • can load translation asynchronously with HTTP requests (use axios module)

  • guess browser language and use it automatically

  • default message directly in your component

    {{ $t('error_684', 'User already exists') }}

  • load data in translation

    this.$t('helloUser', 'hello {user}', {user: 'toto'}) > hello toto

Disclaimer:

This is not a plugin to integrate AirBnb's Polyglot.js into Vue, but a different implementation of its own.

Example

<div id="app">
  <h1>{{$t('title', 'Vue-Polyglot in English')}}</h1>
  <p>{{ createdBy }}</p>
  <p>
    <button type="button"
            v-for="lang in this.$polyglot.languagesAvailable"
            v-on:click="showAppIn(lang)">
      {{lang}}
    </button>
  </p>
</div>
HTML
import Polyglot from 'vue-polyglot';

Vue.use(window.Polyglot.default, {
  defaultLanguage: 'en',
  languagesAvailable: ['fr', 'es']
});

Vue.locales({
  'fr': {
    'title': 'Vue-Polyglot en Français',
    'createdBy': 'Créé par {user}',
  },
  'es': {
    'title': 'Vue-Polyglot en Español',
    'createdBy': 'Creado por {user}',
  }
});

new Vue({
  el: '#app',
  methods: {
    showAppIn: function(lang) {
      this.$polyglot.setLang({lang: lang});
    }
  },
  computed: {
    createdBy: function() {
      return this.$t('createdBy', 'Created by {user}', {user: 'Guillaume Vincent (@guillaume20100)'});
    }
  }
});
Js

API

Vue.use(Polyglot, {
  defaultLanguage: 'en',
  languagesAvailable: ['zh', 'fr']
});

Vue.locales({
  'fr': {
    'hello': 'bonjour',
    'hiUser': 'bonjour {user}'
  },
  'zh': {
    'hello': '你好',
    'hiUser': '你好 {user}'
  }
})
Js

$t(key[, fallbackMessage][, data])

browser locale method translated text
en-US $t('hello') hello
zh-CN $t('hello') 你好
fr-FR $t('hello') bonjour
en-US $t('hello', 'Hello !') Hello !
es-ES this.$t('hiUser', 'hi {user}', {user: 'Guillaume'}) hi Guillaume
fr-FR this.$t('hiUser', 'hi {user}', {user: 'Guillaume'}) bonjour Guillaume

Loading translations synchronously

Set locales with Vue.locales option in your app:

Vue.locales({
  'fr': {
    'hello world': 'bonjour monde'
  },
  'zh': {
    'hello world': '你好，世界'
  }
});
Js

Loading translation file asynchronously

this.$polyglot.getLocale(options = {baseURL = 'i18n', lang = 'auto', ext = '.json'})

Vue.use(Polyglot, {
  defaultLanguage: 'en',
  languagesAvailable: ['zh', 'fr']
});

new Vue({
    el: '#test',
    beforeCreate() {
      this.$polyglot.getLocale({baseURL: 'dist/i18n'});
    },
    methods: {
      getTranslationAndShowAppInChinese() {
        this.$polyglot.getLocale({lang: 'zh'});
      }
    }
  })
Js

It will load asynchronously translations using browser's language.
For example if browser language is fr-FR, languages available are ['zh', 'fr'], this.$polyglot.getLocale({baseURL: 'dist/i18n'}) will get translation from dist/i18n/fr.json file.

this.$polyglot.getLocale({lang: 'zh'}) will get translation from i18n/zh.json file.

Extend translations synchronously

Vue.locales replace all locales. If you want to update translations use extendLocales method instead:

this.$polyglot.extendLocales({
  'fr': {
    'title': 'Vue-Polyglot en Français (??️)'
  },
  'es': {
    'title': 'Vue-Polyglot en Español (??️)',
  },
  'zh': {
    'title': 'Vue-Polyglot在中国 (??️)',
  }
});
Js

Changing the language to use

Use the setLang method of the $polyglot property, like this:

Vue.component({
  methods: {
    showAppInChinese() {
      this.$polyglot.setLang({lang: 'zh'});
    }
  }
});
Js

GitHub

guillaumevincent/vue-polyglot

??

— Read More

Download as zip