I18n in the @sit-onyx/nuxt package

[bergser]

Hello, @larsrickert

I have a question regarding i18n in the nuxt module. We want to use https://github.com/nuxt-modules/i18n to implement i18n (which is recomended way howto use https://vue-i18n.intlify.dev/guide/integrations/nuxt3.html with nuxt)

And I've noticed that @sit-onyx/nuxt implements it a bit differently:
https://github.com/SchwarzIT/onyx/blob/main/packages/nuxt/src/runtime/plugins/onyx.ts

Suggested way for (@nuxtjs/i18n) how to extend messages (https://i18n.nuxtjs.org/docs/guide/extend-messages) in my opinion looks better, and we want to use it for our internal nuxt module.

Could you please explain your decision? This can really help us to not make a mistake in early dev stage.

[larsrickert]

Hey :) The @sit-onyx/nuxt module was implemented by @markbrockhoff, could you share some insights please?

[markbrockhoff]

Hi @bergser, I'm not entirely sure which differences you're refering to, maybe you could give an example :)

But in general the way our module works is that we check if the nuxt-i18n module is installed parallel to the onyx module. If that's the case we basically "hand over" the handling of translations to nuxt-i18n instead of the default translation handling built into onyx.
To make nuxt-i18n aware of the default translations provided by onyx they are registered like mentioned inside the nuxt-i18n docs. You can find that part here:

onyx/packages/nuxt/src/module.ts

Line 107 in 5e1b90f

nuxt.hook("i18n:registerModule", registerOnyxLocales);

The part you linked in your question actually leads to the plugin providing onyx to the nuxt app. (E.g. calling app.use on it to provide global things and so on) This is where we pass the t function of nuxt-i18n to onyx so it will be used to translate all keys used within onyx. Prefixing all keys onyx requests with onyx. as the keys used by onyx itself aren't prefixed and we don't want to pollute the translations of apps by not scoping them ;)

onyx/packages/nuxt/src/runtime/plugins/onyx.ts

Line 17 in 62aca04

const t = computed((): TranslationFunction => {

Inside the module we also need to do a bit of mapping from the language codes used by the app to the ones provided by onyx. As nuxt-i18n is pretty flexible in that regard we can't be sure a app e.g. uses standard iso codes. Some apps also have custom locales e.g. "de-INT" which need to manually be mapped to a locale supported by onyx.
I created a feature request (nuxt-modules/i18n#2999) within nuxt-i18n some time ago to make this part a bit cleaner. Maybe now that nuxt-i18n v9 was released this is now obsolete and we could look into improving the setup on that side.

I hope that clarifies things a bit. In general I don't think we're that much off from the way of doing things recommended by the docs, but we're of course always open for improvement ;)

[bergser]

@markbrockhoff thank you for the clarification. So my question was more about that plugin and how you are using it, to understand if we should use same approach or not.

If I get you right only purpose of it, is to avoid unnecessary nesting in json files, and add onyx. namespace to all translation keys.

[markbrockhoff]

Basically the only reason for the plugin is that onyx does a few things at runtime so we need to pass the vue plugin created by createOnyx to app.use of our vue app. That's just how this is done in Nuxt modules.
All the translation part is more related to the fact that we want onyx to integrate with nuxt-i18n while not being coupled to it. So neither nuxt-i18n nor vue-i18n are dependencies of onyx. But if you already use them inside your project, you can tell onyx to also use them so you can easily e.g. override translations used by onyx components.

Tldr: We do this extra step inside the plugin because our module does not only provide translations to nuxt-i18n, it also consumes them through nuxt-i18n ;)

[markbrockhoff]

If your module should only provide translations to nuxt-i18n -> Do as the nuxt-i18n docs say.
If you also want to use nuxt-i18n inside your module, our approach could also work for you ;)