Per Component Translations & Property '$loadPageTranslations' does not exist on type 'PluginsInjectionsWithAliases'

[mhelbich]

Hey there, I recently stumbled upon this (pretty cool looking) i18n alternative to the "normal" Nuxt i18n solution.
Specifically, I'd been looking for something more lightweight, with some alternate handling, so this project seems to be what I was looking for.

I'll get back to the Discussion title in a moment, after a quick preface...

Now then, I've been trying to look into a more optimized way of storing translations "per-component". I know that this package also supports such a use case with https://s00d.github.io/nuxt-i18n-micro/guide/per-component-translations, but I feel like maybe I got the use case wrong.

First of all, this utility seems to be more intended to be used with pages, or at least that's the feeling I get when looking at the docs and the combined usage with the definition of localeRoutes in that function?
Second, when you use a component with $defineI18nRoute, all of the translations are sent along with the component right away, from what I was able to track via console/network tab.

I'd been looking for a way to get it to behave similarly to how the actual page translation files are loaded: when you are on any route, and use, for example, the provided i18n-switcher component, the other set of translation messages (like general and [route]) get loaded lazily.
When trying to see if it's possible to expand on how this is done, I found https://s00d.github.io/nuxt-i18n-micro/composables/useI18n#loading-page-specific-translations in the docs. My plan was to try and use it (before trying to implement a custom solution), to better split up translations for components again, so maybe with a folder structure like this:

locales/
┣ components/
┃ ┗ ComponentA/
┃   ┣ de.json
┃   ┗ en.json
┣ pages/
┃ ┗ index/
┃   ┣ de.json
┃   ┗ en.json
┣ de.json
┗ en.json

If that makes sense?

However, it seems like that function might no longer exist in the current version (1.83.0) - at least I can't seem to find it in the source code (or it's just missing in https://github.com/s00d/nuxt-i18n-micro/blob/main/src/runtime/composables/useI18n.ts).

That's why I decided it could be worth asking here, for both topics:

• The Per Component Translations
• The problem with the $defineI18nRoute function

Thanks for any answers! 👋

[s00d]

Hello, storing translations for components in separate files is a very bad idea — each additional request will slow down the page load. Take a look at per-component-translations: https://s00d.github.io/nuxt-i18n-micro/guide/per-component-translations

I'll remove the old info from the documentation.

[mhelbich]

If you say that that's the way to go, then I guess that's it. I was mainly asking if there wasn't an alternative way, since with the $defineI18nRoute, all of your translations get sent over to the client, regardless if they ever need to be swapped out or anything, which I just thought was somewhat unnecessary.

Thanks for the answer though.

[s00d]

This is probably the best and simplest way because of how Nuxt works. I couldn’t find a better solution to get the translations, and this one is the only one that’s been tested and works for sure.