[ Feature Request ] Dynamically load json file

[sqram]

Requesting the ability to include a json file by having a variable in the src path ie,

<i18n src=~/data/test/${process.env.locale}.json></i18n>

For frameworks that generate static files (ie, Nuxt), this would allow us to reduce load size, especially if a page is content heavy

[gregveres]

This isn't just useful for Nuxt type sites. I have been searching the past few days for a way to dynamically load localized strings as my SPA dynamically loads it's features.

Here is the situation I am tyring accomplish: Assume my SPA is broken down into three different components:

1. Home Page (loaded when the page loads)
2. Admin Console (loaded if the user is admin and they click on the admin link)
3. User Profile (loaded if any user goes to their user preferences / information area)

There is no need to load the Admin Console (a ton of code) or User Profile code if the user doesn't visit those parts of the code. And since I am not loading the code for the Admin Console, or the User Profile, why would I load all the UI strings for that area? I wouldn't. I only want to pre-load the Home Page UI strings.

Then when I import the Admin Console, I want that code to demand load the strings for the user's language for the Admin Console, so that when we display the Admin Console, the strings are then ready to go - or I wait for them to be ready.

Hmm, now that I think more about the Nuxt case, maybe it is different. If you want to put this a different feature request feel free.

Or if there is a guide somewhere that explains how to do what I am talking about, please point me to it. Frankly, I am incredibly surprised that how to do what I described isn't explained in every tutorial. I would have thought that every single SPA works that way.

[ducmerida]

any updates to this feature request ? I think that could be a really useful feature

[Mastercuber]

Partially vue-router and lazy loading can help with this problem. When using vue router and lazy loading, the resources for the component associated with that route gets only loaded when one is navigating to that route. The problem here is, all resources will be loaded. So if in a custom block are 10 translations, all will be loaded.

More optimal would be if the translations for one language gets loaded per default. Then, if the language changes one other translation (for the current component) is loaded. The maximal optimum I see would be to only load used translation strings for the current language and also only for the visible components (vue-router with lazy loading).

Edit: It seems like it's also possible to lazy loading components itself. So no need to use vue-router - if not already in use. In the context of internationalization and the custom i18n block, presumably all translations would get loaded, like with vue-router.

[kazupon]

vue-i18n-loader will be deprecated near the future We can use unplugin-vue-i18n Thanks