How to use in Vue

[Mo-shi]

the example is gone , i cant use it.

[melloware]

Sorry try this URL: https://codesandbox.io/p/devbox/primevue-locale-loader-forked-mxkhh8?file=%2Fsrc%2FApp.vue

[Tamas-hi]

While I really love the idea to be finally able to use the translation programatically, adding a code block like this:

onMounted(() => {
  // Not sure why a relative path is needed here, "@/" or "./" doesn't work
  primeVueLocaleFiles = import.meta.glob("../node_modules/primelocale/*.json");

  localeOptions.value = Object.keys(primeVueLocaleFiles)
    .map((e) => e.match(/\/([^/]+)\.json$/)[1])
    .filter((e) => e.split("-")[0].length === 2);
});

watchEffect(() => updatePrimeVueConfigWithLocaleTag(selectedLocale.value));

async function updatePrimeVueConfigWithLocaleTag(localeTag) {
  if (!localeTag) return;

  const localeRe = new RegExp(`\\b${localeTag}.json$`, "i");
  const langRe = new RegExp(`\\b${localeTag.split("-")[0]}.json$`, "i");
  let localeFileName = Object.keys(primeVueLocaleFiles).find((locale) =>
    localeRe.test(locale)
  );
  localeFileName ??= Object.keys(primeVueLocaleFiles).find((locale) =>
    langRe.test(locale)
  );

  const localeFile =
    Object.values(
      (await primeVueLocaleFiles[localeFileName]?.())?.default
    )[0] ?? defaultOptions.locale;

  primevue.config.locale = {
    ...primevue.config.locale,
    ...localeFile,
  };

just makes the code too complicated / unreadable. If anyone comes here, it is much cleaner for now to manually add the translations to your translation file and import it from there. Of course you lose the automatic translation update.

I think this is a really nice initiatve and really grateful for your work, but it would be so cool to be able to add the translations to your app much cleaner.

[melloware]

That is just an example so it shows you how to use everything etc. There is nothing stopping you from statically linking the languages you want to use...

import locale_ar_tn from 'primelocale/ar-tn.json';
import locale_ar from 'primelocale/ar.json';
import locale_bg from 'primelocale/bg.json';
import locale_ca from 'primelocale/ca.json';
import locale_ckb from 'primelocale/ckb.json';
import locale_cs from 'primelocale/cs.json';
import locale_da from 'primelocale/da.json';
import locale_de_at from 'primelocale/de-at.json';
import locale_de_ch from 'primelocale/de-ch.json';
import locale_de from 'primelocale/de.json';
import locale_el from 'primelocale/el.json';
import locale_en_au from 'primelocale/en-au.json';
import locale_en_gb from 'primelocale/en-gb.json';
import locale_en from 'primelocale/en.json';
import locale_es from 'primelocale/es.json';
import locale_fa from 'primelocale/fa.json';
import locale_fi from 'primelocale/fi.json';
import locale_fr from 'primelocale/fr.json';
import locale_he from 'primelocale/he.json';
import locale_hi from 'primelocale/hi.json';
import locale_hr from 'primelocale/hr.json';
import locale_hu from 'primelocale/hu.json';
import locale_id from 'primelocale/id.json';
import locale_it from 'primelocale/it.json';
import locale_ja from 'primelocale/ja.json';
import locale_kk from 'primelocale/kk.json';
import locale_km from 'primelocale/km.json';
import locale_ko from 'primelocale/ko.json';
import locale_ku from 'primelocale/ku.json';
import locale_ky from 'primelocale/ky.json';
import locale_lv from 'primelocale/lv.json';
import locale_ms from 'primelocale/ms.json';
import locale_nb_no from 'primelocale/nb-no.json';
import locale_nl from 'primelocale/nl.json';
import locale_pl from 'primelocale/pl.json';
import locale_pt_br from 'primelocale/pt-br.json';
import locale_pt from 'primelocale/pt.json';
import locale_ro from 'primelocale/ro.json';
import locale_ru from 'primelocale/ru.json';
import locale_sk from 'primelocale/sk.json';
import locale_sl from 'primelocale/sl.json';
import locale_sr_rs from 'primelocale/sr-rs.json';
import locale_sv from 'primelocale/sv.json';
import locale_th from 'primelocale/th.json';
import locale_tr from 'primelocale/tr.json';
import locale_uk from 'primelocale/uk.json';
import locale_uz from 'primelocale/uz.json';
import locale_vi from 'primelocale/vi.json';
import locale_zh_CN from 'primelocale/zh-CN.json';
import locale_zh_TW from 'primelocale/zh-TW.json';

Full example in React https://github.com/melloware/quarkus-primereact/blob/main/src/main/webui/src/App.tsx

I loaded all the languages and then pick from their browser locale to load the correct language statically linked.

[Mo-shi]

I don’t know if you know ElementUI, its translation only needs one import. Like this

import zhCn from 'element-plus/es/locale/lang/zh-cn'

It would be best if PrimeVue could be encapsulated like this.

[Mo-shi]

I know it can be packaged like this, but my skills are not up to par. xD

[Tamas-hi]

That is just an example so it shows you how to use everything etc. There is nothing stopping you from statically linking the languages you want to use...

import locale_ar_tn from 'primelocale/ar-tn.json';
import locale_ar from 'primelocale/ar.json';
import locale_bg from 'primelocale/bg.json';
import locale_ca from 'primelocale/ca.json';
import locale_ckb from 'primelocale/ckb.json';
import locale_cs from 'primelocale/cs.json';
import locale_da from 'primelocale/da.json';
import locale_de_at from 'primelocale/de-at.json';
import locale_de_ch from 'primelocale/de-ch.json';
import locale_de from 'primelocale/de.json';
import locale_el from 'primelocale/el.json';
import locale_en_au from 'primelocale/en-au.json';
import locale_en_gb from 'primelocale/en-gb.json';
import locale_en from 'primelocale/en.json';
import locale_es from 'primelocale/es.json';
import locale_fa from 'primelocale/fa.json';
import locale_fi from 'primelocale/fi.json';
import locale_fr from 'primelocale/fr.json';
import locale_he from 'primelocale/he.json';
import locale_hi from 'primelocale/hi.json';
import locale_hr from 'primelocale/hr.json';
import locale_hu from 'primelocale/hu.json';
import locale_id from 'primelocale/id.json';
import locale_it from 'primelocale/it.json';
import locale_ja from 'primelocale/ja.json';
import locale_kk from 'primelocale/kk.json';
import locale_km from 'primelocale/km.json';
import locale_ko from 'primelocale/ko.json';
import locale_ku from 'primelocale/ku.json';
import locale_ky from 'primelocale/ky.json';
import locale_lv from 'primelocale/lv.json';
import locale_ms from 'primelocale/ms.json';
import locale_nb_no from 'primelocale/nb-no.json';
import locale_nl from 'primelocale/nl.json';
import locale_pl from 'primelocale/pl.json';
import locale_pt_br from 'primelocale/pt-br.json';
import locale_pt from 'primelocale/pt.json';
import locale_ro from 'primelocale/ro.json';
import locale_ru from 'primelocale/ru.json';
import locale_sk from 'primelocale/sk.json';
import locale_sl from 'primelocale/sl.json';
import locale_sr_rs from 'primelocale/sr-rs.json';
import locale_sv from 'primelocale/sv.json';
import locale_th from 'primelocale/th.json';
import locale_tr from 'primelocale/tr.json';
import locale_uk from 'primelocale/uk.json';
import locale_uz from 'primelocale/uz.json';
import locale_vi from 'primelocale/vi.json';
import locale_zh_CN from 'primelocale/zh-CN.json';
import locale_zh_TW from 'primelocale/zh-TW.json';

Full example in React https://github.com/melloware/quarkus-primereact/blob/main/src/main/webui/src/App.tsx

I loaded all the languages and then pick from their browser locale to load the correct language statically linked.

Thanks, that is something I missed during the setup.

[melloware]

import zhCn from 'element-plus/es/locale/lang/zh-cn'

@Mo-shi isn't

import zhCn from 'element-plus/es/locale/lang/zh-cn'

identical to

import zhCn from 'primelocale/zh-CN.json';

[Mo-shi]

@melloware it is Element UI other UI Localization. Not PrimeVue. https://element-plus.org/zh-CN/component/date-picker.html#%E5%9B%BD%E9%99%85%E5%8C%96

[Mo-shi]

@melloware I know this is a bit excessive But I hope one day to achieve internationalization solely through import language package. Wish all good.