Note. It is recommended to put these functions in a separate file from the configuration, to allow the Qwik compiler to respect the initialization order of the functions
loadTranslation$
loadTranslation$ is the core function of the library. It is a customizable QRL function, with which you can load the translation files in the way you prefer.
Bundling files
Dynamic import
To improve performance, it is recommended to bundle translation files instead of fetching them:
/** * Translation files are lazy-loaded via dynamic import and will be split into separate chunks during build. * Assets names and keys must be valid variable names */consttranslationData=import.meta.glob<Translation>('/i18n/**/*.json');constloadTranslation$:LoadTranslationFn=server$((lang:string, asset:string) => translationData[`/i18n/${lang}/${asset}.json`]?.());
Using server$ instead of $, translation data is always accessed on the server
We could also catch errors during development:
constloadTranslation$:LoadTranslationFn=server$((lang:string, asset:string) => {constlangAsset=`/i18n/${lang}/${asset}.json`;if (langAsset in translationData) {return translationData[langAsset](); }if (isDev) {console.warn(`loadTranslation$: ${langAsset} not found`); }returnnull;});
Dynamic import as string
If your keys are not valid variable names, you can import files as strings:
/** * Translation files are lazy-loaded via dynamic import and will be split into separate chunks as strings during build */consttranslationData=import.meta.glob('/i18n/**/*.json', { as:'raw' });constloadTranslation$:LoadTranslationFn=server$((lang:string, asset:string) =>JSON.parse(translationData[`/i18n/${lang}/${asset}.json`]));
Refer to Vite documentation for more information on Glob import