2.0.1 • Published 5 years ago

vue-polyglot v2.0.1

Weekly downloads
46
License
MIT
Repository
github
Last release
5 years ago

Build Status

basic translation plugin for VueJS 2+

Vue-Polyglot

notes

  • Vue-Polyglot doesn't get translation asynchronously in version 2+

  • This is not a plugin to integrate AirBnb's Polyglot.js into Vue, but a different plugin for managing translation in VueJs.

Installation

npm install --save vue-polyglot

TLDR

  • 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

Demo

demo

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>
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)"
      });
    }
  }
});

API

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

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

\$t(key, fallbackMessage)

browser localemethodtranslated text
en-US$t('hello')hello
zh-CN$t('hello')你好
fr-FR$t('hello')bonjour
en-US$t('hello', 'Hello !')Hello !
es-ESthis.$t('hiUser', 'hi {user}', {user: 'Guillaume'})hi Guillaume
fr-FRthis.$t('hiUser', 'hi {user}', {user: 'Guillaume'})bonjour Guillaume

Loading translations

Set locales with Vue.locales option in your app:

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

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在中国 (🦄🖐️)"
  }
});

Changing the language to use

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

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

Utils

See Vue-Polyglot-Utils

License

License MIT (see LICENSE file)

2.0.1

5 years ago

2.0.0

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

0.2.3

6 years ago

0.2.2

6 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.8

7 years ago

0.1.7

7 years ago

0.1.6

7 years ago

0.1.5

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago