VUE ?? ??? ? ???? ?? VUE I18N ????? ???? ?????. 1. NPM ?? ??? ?? VUE-I18N? ??????. 2. ?? ???? ?? ??? JSON ?? (? : EN.JSON, ES.JSON)? ????. 3. ??? ?? ? ??? ??? main.js?? i18n ????? ??????. 4. $ t ( '?')? ???? ????? ??? ???????. 5. ?? ?? ???? ???? ?? ?? ?? ?? ??? ?????. 6. ???? ??? ??? ?????? ??? ???? ?????. 7. ??? ?? ??? ?? ?? ?????? ??? ??? ??????. 8. $ t ( 'hellouser', {name : 'alice'})? ?? ?? ???? ???? ?? ?? ??????. 9. I18N ???? ??? ??? ???? ??? ?? ??? ?? $ tc ()? ??????. 10. RTL ?? ?? ?? ??? ?? ?? ??? ?? ?? ??? ??? ???? ?? Intl ?? Date-FNS? ?? ?????? ??????.

VUE ?? ??? (I18N) ? ??? (L10N)? ?? ? ??? ?? ???. ???? ?? ???? ???? ???? ???? ???, ??, ?? ? ?? ??? ?? ??? ???? ?????. ?? ???? ?? ????? ??? ??? VUE ?? ?? ??? ?? ? ???? ? Vue i18N? ???? ????.

VUE I18N ??

????? NPM ?? ??? ?? vue-i18n ??????.

 NPM ?? vue-i18n@9

???? Locale ??? ?? ( en.json , es.json ?)? ???? ? ?? ?? ( main.js ?? ?? ???)?? i18n ????? ??????.

 'vue'?? {createapp} ?? ??
'vue-i18n'?? {createi18n} ?? ??
'./app.vue'?? ? ?? ??
'./locales/en.json'?? ?? ??
'./locales/es.json'?? ES ?? ??

const i18n = createi18n ({{
  ??? : ??,
  ??? : 'en',
  FollbackLocale : 'en',
  ??? : {
    ko,
    es
  }
})

CreateApp (app) .use (i18n) .mount ( '#app')

?? $t('key') ???? ???? ?? ???? ??? ??? ? ? ????.

?? ??? ????? ?????

???? ?? ??? ?? ?? ???? ?? ??? ?? ??? ? JSON ??? ??????.

en.json

 {
  "??": "?????!",
  "??": {
    "??": "??"
  }
}

es.json

 {
  "??": "? Bienvenido!",
  "??": {
    "??": "Enviar"
  }
}

?? ?? ?? ???? ?? ?? ??? ?? ?????. Poeditor ?? Crowdin ? ?? ??? ???? ?? ?? ? ?? ?? ?? ?? ??? ?? ? ? ??????.

? ?? ? :

• ?? ??? ???? ???? ??????.
• ??? ??? ???? ?? ?? ? ??? ?????. ?? ????? ? ????.
• ?? ? ???? ?? ? ?? ??? ?? ?? ??? ??? ??????.

??? ???? ?????

????? ?? ??? ???? ?? ?????. i18n ?????? locale ??? ?????? ??????.

 'vue-i18n'?? {usei18n} ?? ??

???? ??? {
  ??() {
    const {locale} = usei18n ()

    ?? changelang (Newlang) {
      locale.value = Newlang
    }

    ?? {Locale, Changelang}
  }
}

????? :

 <button @click = "changelang ( &#39;es&#39;)"> espa?ol </button>

????? ?? ?? ?? ???? ?? ?????. ???? ?? ? ??? ?? ? ??? ???? ?? ?????? ??? ??? ?? ? ? ????.

?? ? ??? ? ??? ??

??? ??? ?? ? ???? ????? ???? ???????. Vue i18n? ??? ?? ?????.

?? ? ?? :

JSON?? :

 "Hellouser": "?????, {name}!"

?? ???? :

 <p> {{$ t ( &#39;hellouser&#39;, {?? : &#39;alice&#39;})} </p>

??? :

i18N ???? ?? ?? ?? :

 const i18n = createi18n ({{
  ??? : ??,
  ??? : 'en',
  FollbackLocale : 'en',
  ??? : {
    ko : (??, ??, ??) => {
      if (choicesLength === 2) {
        ?? ??> 1? 1 : 0
      }
      ?? ??? 1 : 0
    }
  },
  ??? : {
    ko,
    es
  }
})

?? ?? JSON?? :

 "?? selected": "{count} ??? ?????? | {count} ??? ??????."

??? ????? :

 <p> {{$ tc ( &#39;itemsSelected&#39;, itemCount, {count : itemCount})} </p>

?? ?? ?? ??? ?? ??? UI? ????? ?????.

??? ????? i18N? L10N? VUE?? ???? ?????. ??? ?? ? ??? ?? ????? ??? RTL ??, ?? ?? ?? ?? ??? ?? ?? ???? ???? ????? ????. ?? ???? date-fns ?? Intl ? ?? ?????? ??? ??????. ??? ???? ?? ??? ?? Vue i18n? ??? ? ????.

? ??? VUE ?? ?????? ??? (I18N) ? ??? (L10N)? ??? ??? ? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!