i18n guide lines and info about using vue i18n plugin

Come nell'esempio di questo commit, per localizzare un interfaccia è necessario che:

• Nella cartella locales relativa al percorso della sua relativa applicazione di uso ( aka: player/locales; editor/locales ...; per le storie forse sarà stories/locales ma è ancora da definire ) ci sia almeno un file json, con il nome del codice i18n della localizzazione voluta (es: it.json, en.json, en-US.json, ecc ... )
• Il file JSON sia un JSON valido, e la sua struttura sia abbastanza intuitiva, ed almeno abbia una struttura in base ai componenti e contesti in cui la localizzazione è richiesta (es tale che una volta "parserizzato" si possa avere un struttura del tipo WidgetComponent.contextAttribute.name ), e che il campo finale abbia la traduzione del relativo elemento (vedi: sezione formattazione).
• Il client deve richiedere al server il locales tramite un API GET: <applicativo>/locales/[i18n code], dove:
  • applicativo è : player, editor o valutatore
  • i18n code è : il codice localizzato della lingua da richiedere. se omesso restituisce un json contenente tutte le localizzazioni.
  • La struttura del json ha per valori delle chiavi i codici i18n richiesti, con valore associato il relativo contenuto json.
• Si instanzi un oggetto VueI18n, che venga passato come parametro all'istanza Vue
  • Es: const i18n = new VueI18n({ locale: 'en-US', fallbackLocale: 'en', messages: { 'en-US': { labelTools: "Tools" }, } })
  • Es: const vm = new Vue({ i18n, el: "#myApp" })
  • Nel campo locale è assegnato il codice i18n che sarà utilizzato per la localizzazione
  • Nel campo messages è assegnato l'oggetto avente per chiavi i codici i18n e con valori le relativi traduzioni. Potenzialmente potrebbero essere memorizzate tutte le localizzazioni, e sarà vue-i18n ad usare la corretta localizzazione in base al valore di locale.
  • Nel campo fallbackLocale è assegnato il codice della localizzazione utilizzata in caso il locale utilizzato non sia disponibile in messages, quindi vue-i18n utilizzera la localizzazione del fallbackLocale.Nota: se non specificato, il plugin tenterà di usare la localizzazione più vicina possibile; Es: se richiedo di usare en-US-dialettoStrano ma ho solo en-US userà en-US, e così via fino a en. a questo punto se non è disponibile neanche quella base, è necessario impostare il codice di fallback, che abbiamo definito come 'en', per cui dovrà sempre esistere una localizzazione.
  • Nota 2: a volte può dare dei warning, per silenziarli assegnare silentFallbackWarn: true all'istanza di VueI18n
  • é possibile fare una catena di fallback anche su linguaggi diversi:
    fallbackLocale: {
/* 1 */ 'de-CH': ['fr', 'it'],
/* 2 */ 'zh-Hant': ['zh-Hans'],
/* 3 */ 'es-CL': ['es-AR'],
/* 4 */ 'es': ['en-GB'],
/* 5 */ 'pt': ['es-AR'],
/* 6 */ 'default': ['en', 'da']
    },`
  • In questo modo per de-CH tenterà per de-CH > fr > it > en > da dove nell esempio 'en', 'da' sono i 18n di default per tutti i locales
• Nel contensto dove si voglia utilizzare la localizzazione, si utilizzi come i seguenti esempi:
  • Interpolazione <p>{{ $t('labelTools') }}</p>
  • Pluralizzazione:
    • const messages = {
en: {
apple: 'no apples | one apple | {count} apples'
}
}
    • <p>{{ $tc('apple', 0) }}</p>// no apples
      <p>{{ $tc('apple', 1) }}</p>// one apple
      <p>{{ $tc('apple', 10, { count: 10 }) }}</p> // 10 apples ( il parametro passato non per forza è un numbero, ma anche stringa, ecc ...
    • Se non esistono regole, sarà utilizzato per default quella en
    • Personalizzabile con computazione
    • i metodi $t, $tc, ... posso essere usati come direttive di vue togliendo il prefisso $ e sostituendolo con v-
      Vedere Pro e contro