guillaumevincent / vue-polyglot Goto Github PK

View Code? Open in Web Editor NEW

44.0 4.0 7.0 1.76 MB

basic translation plugin for VueJS 2+

Home Page: https://guillaumevincent.github.io/vue-polyglot/example/

License: MIT License

HTML 33.01% JavaScript 66.99%

vue-polyglot's Introduction

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][, 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

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)

vue-polyglot's People

Contributors

Stargazers

Watchers

Forkers

edouard-lopez dukenst2006 athiwatp adrianlc trendingtechnology raphhhhh

vue-polyglot's Issues

support cascade data in locale

Vue.locales({
  'en': {
    'coinstList': 'Coins list',
    'features': 'Features',
    'team': 'Team',
    'subscription': 'Subscription',
    'profile': 'Profile',
    'signOut': 'Sign out',
    'landing': {
      'description': 'an open-source platform for collaborative crypto-asset investment analysis'
    }
  }
})

I can't get {{$t('landing.description')}}. In https://github.com/kazupon/vue-i18n this feature is work.

No overload matches this call.

Hi @ALL,

I am using vue-polyglot library.
I have tested it in core vue application and there it was working fine.
As soon as I install it in my typescript application it started giving me error.

16:9 No overload matches this call.
Overload 1 of 2, '(plugin: PluginObject<{ defaultLanguage: string; languagesAvailable: string[]; }> | PluginFunction<{ defaultLanguage: string; lang
uagesAvailable: string[]; }>, options?: { ...; } | undefined): VueConstructor<...>', gave the following error.
Argument of type '{ name: string; components: { [x: number]: any; }; data(): { msg: string; }; }' is not assignable to parameter of type 'PluginOb
ject<{ defaultLanguage: string; languagesAvailable: string[]; }> | PluginFunction<{ defaultLanguage: string; languagesAvailable: string[]; }>'.
Property 'install' is missing in type '{ name: string; components: { [x: number]: any; }; data(): { msg: string; }; }' but required in type 'Plu
ginObject<{ defaultLanguage: string; languagesAvailable: string[]; }>'.
Overload 2 of 2, '(plugin: PluginObject | PluginFunction, ...options: any[]): VueConstructor', gave the following error.
Argument of type '{ name: string; components: { [x: number]: any; }; data(): { msg: string; }; }' is not assignable to parameter of type 'PluginOb
ject | PluginFunction'.
Property 'install' is missing in type '{ name: string; components: { [x: number]: any; }; data(): { msg: string; }; }' but required in type 'Plu
ginObject'.
14 | const authService = new AuthService();
15 |

16 | Vue.use(Polyglot, {
| ^
17 | defaultLanguage: 'en',
18 | languagesAvailable: [ 'fr', 'es', 'zh' ],
19 | });

Warning since vuejs v2.3.0

I get these warning since the last version of vue.js :

[Vue warn]: The computed property "lang" is already defined in data.
[Vue warn]: The computed property "languagesAvailable" is already defined in data.

child components

How to use:

Vue.locales({
  'en': {
    'title': 'Coins list'
  },
  'ru': {
    'title': 'Список монет'
  },
  'zh': {
    'title': '資產'
  }
})

in child coin.vue component? This overrides main comonent config app.vue.

XML Parsing Error "not well-formed Location"

When using LessPass as Firefox extension, I got the warning "Erreur d’analyse XML : mal formé
Emplacement : jar:file://[firefox-profile]/extensions/[email protected]!/dist/i18n/fr.json
Numéro de ligne 1, Colonne 1 :" in the browser console log. I guess it is more precisely an issue in this library, hence filling an issue here.