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?
15 Replies
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.
Not open source sadly and no budget for something so large 😦
I moreso was asking what within
nuxt-i18n or vue-i18n I can use to dynamically load the translations once they edit that JSON on the frontend, I couldn't find anything.@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
😦
is it in a composable somewhere?
You need to have an instance of vue-i18n
I use it a lot for translation overload for example
Or live translation
oooo awesome it worked! thank you so much!
You're welcome
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
To insert the i18n translation key into the HTML Dom and use it
With an event binding
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
@Bobakanoosh you can use the postTranslationHandler to inject html around the key you want to translate
const showTranslationPath: PostTranslationHandler<VueMessageType> = (message, key) => {
return
<span data-text="${key}" class="i18n-path">${message}</span>;
};
only in dev
so you can bind a click on all element with class .i18n-path here and use the i18n translation key available in data-textOh shitttt nice thank you!! I didn’t think this would be easily doable without wrapping them all myself
next you have to develop yourn own interface arround this !
use this only on development
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
clean