Nuxt•2y ago

nuxt-i18n dynamically load translations

I want to make it easier for people helping translate my site by giving them an embedded JSON editor that as they change, updates the site. That way they can visually see where their translations are going.

Any idea how I could accomplish this?

Nasr galal•5/10/24, 9:45 PM

If you need to have a JSON editor as a front-end solution, you may check these libraries:
--> JSONEditor (https://jsoneditoronline.org/)
--> Monaco Editor (https://microsoft.github.io/monaco-editor/) (more complex but offers advanced features)

-----
On the other hand

If your site is open-source, and you need a fancy solution, I highly recommend Crowdin
https://crowdin.com/

You can have one private project there. Vuetify team are using this platform to translate the documentation

hope this might help giving some keys to what you are looking for, please forgive If I misunderstood your question

JSON Editor Online: edit JSON, format JSON, query JSON

JSON Editor Online is a web-based tool to view, edit, format, repair, compare, query, transform, validate, and share your JSON data.

Crowdin

Crowdin | Localization Management Platform for agile teams

Crowdin's localization management platform is a technology solution for your team.

BobakanooshOP•5/11/24, 1:15 AM

Not open source sadly and no budget for something so large

I moreso was asking what within or I can use to dynamically load the translations once they edit that JSON on the frontend, I couldn't find anything.

xibman•5/11/24, 6:48 AM

@Bobakanoosh You can use this method: https://vue-i18n.intlify.dev/api/composition.html#mergelocalemessage-locale-message

Composition API | Vue I18n

Internationalization plugin for Vue.js

Xxibman @Bobakanoosh You can use this method: https://vue-i18n.intlify.dev/api/composit...

BobakanooshOP•5/11/24, 6:54 AM

is it in a composable somewhere?

xibman•5/11/24, 6:55 AM

You need to have an instance of vue-i18n

xibman•5/11/24, 6:55 AM

I use it a lot for translation overload for example

xibman•5/11/24, 6:56 AM

Or live translation

BobakanooshOP•5/11/24, 6:56 AM

oooo awesome it worked! thank you so much!

xibman•5/11/24, 7:00 AM

You're welcome

xibman•5/11/24, 7:03 AM

If you want to go further you can use https://vue-i18n.intlify.dev/api/general.html#posttranslationhandler

General | Vue I18n

Internationalization plugin for Vue.js

xibman•5/11/24, 7:03 AM

To insert the i18n translation key into the HTML Dom and use it

xibman•5/11/24, 7:04 AM

With an event binding

BobakanooshOP•5/11/24, 3:43 PM

Hmm can you show me an example? I was planning on just storing their modified version in local storage or a cookie since they’ll only modify it temporarily

xibman•5/13/24, 7:33 AM

@Bobakanoosh you can use the postTranslationHandler to inject html around the key you want to translate

xibman•5/13/24, 7:34 AM

const showTranslationPath: PostTranslationHandler<VueMessageType> = (message, key) => {
return ;
};

xibman•5/13/24, 7:34 AM

only in dev

xibman•5/13/24, 7:35 AM

so you can bind a click on all element with class .i18n-path here and use the i18n translation key available in data-text

BobakanooshOP•5/13/24, 2:28 PM

Oh shitttt nice thank you!! I didn’t think this would be easily doable without wrapping them all myself

xibman•5/13/24, 3:28 PM

next you have to develop yourn own interface arround this !

xibman•5/13/24, 3:28 PM

use this only on development

BobakanooshOP•5/13/24, 8:47 PM

I have this right now that lets you drag it around and live edit the translations, I think it will be good enough for now. Already spent too long getting my site ready for translations. once I can invest some more time in it I'll do some more advanced stuff

xibman•5/14/24, 10:42 AM

clean