Custom loadLanguageAsync function

[desislavsd]

What problem does this feature solve?

Currently there is an option to lazy load locale messages that are spread over separate files in a specified directory. This is a nice feature but it is very specific. It uses internal loadLanguageAsync function. I would prefer to have more control over how the messages are loaded. If I can provide custom lazy load function to be used in place of loadLanguageAsync I would be able, for example, to fetch the messages from an API or whatever. The function should take care of caching on its own.

What does the proposed changes look like?

One way to go might be to allow the lazy option in nuxt.config.js to accept both Boolean and Function:

i18n: {

    lazy: ( ctx, locale) => ctx.$http.$get(`locales/${locale}`)

}

This approach has the drawback that the function will not be transpiled during build. Therefore, probably registering it via a plugin would be the best. Maybe something like:

export default function({app, installI18n}){

    installI18n(
        // pass context & inject as they will probably be needed
        ...arguments, 

        // pass additional options to be merged with nuxt.config.i18n
        {
            lazy: ( ctx, locale) => ctx.$http.$get(`locales/${locale}`)
        }
    )
}

But event without transpiling, simply having this option would be great!

Hope you find this feature convenient.

_{This feature request is available on Nuxt community (#c384)}

[rchl]

Would fix for #256 meet your requirements. I feel it's quite brittle to try to fetch locales dynamically from the API on changing locale. I wouldn't want something like that failing. I feel it's better to prepare all translations at build time.

[dreamid27]

Would fix for #256 meet your requirements. I feel it's quite brittle to try to fetch locales dynamically from the API on changing locale. I wouldn't want something like that failing. I feel it's better to prepare all translations at build time.

Yes, it's better for approach, but not for performance. Imagine you have 10 locale, are you sure will attach that in the 1 files ?

[rchl]

If you have 10 locales, then you have separate files for each and only the ones that are actually currently used (+eventually fallback locale) are loaded since webpack splits those into individual bundles.

If each individual locale file is big then the initial cost of loading those can be big but surely lower than making an API call.

I'm not against this feature request but I wouldn't use it in typical situations, at least. Tt's more reliable and faster to bundle translations. The downside being that deploy is needed to update translations which might not work for CMS-like cases.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[rchl]

I believe this is already possible since the locale file can be a script that exports a function and it's also passed context and locale.

The only weird thing about it right now is that if you have multiple locales you would have to assign the same file to all of them configuration.

[desislavsd]

I believe this is already possible since the locale file can be a script that exports a function and it's also passed context and locale.

The only weird thing about it right now is that if you have multiple locales you would have to assign the same file to all of them configuration.

This is exactly what I did when opened the issue :D. But it feels bad. This functionality is needed as I often need to provide the clients with the ability to update phrases real time in their admin panel. I cannot afford to rebuild the project each time. Also I believe, the functionality can be achieved with a minor tweak in a single line of code.

[mydnic]

Does anyone found a way to make this work ? I've been searching across repositories issues and documentations but didn't find anything. I would like a way to load translations from an API (Json response)

[rchl]

It's right there in the documentation: https://i18n.nuxtjs.org/lazy-load-translations

The file property of the locale object can point to a javascript file that exports a function. The function can be async also so you can just make a network request in there and return your JSON data.

[mydnic]

It's right there in the documentation: https://i18n.nuxtjs.org/lazy-load-translations

The file property of the locale object can point to a javascript file that exports a function. The function can be async also so you can just make a network request in there and return your JSON data.

oh god, my bad, you're right Thanks !!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.