Vue I18n Phrase In-Context Editor is a simple yet powerful package which helps you to integrate the Phrase In-Context Editor into your existing VueJS app. The one and only prerequisite is to use the awesome Vue I18n library to handle all translation-related logic in your web application.
Haven't you always wanted to allow translators to edit the content directly within your application? Well, you're in luck, because now you can do that with the Phrase In-Context Editor. Our library allows you to edit translations while browsing the production-ready application. From now on, you will always see the content right where it belongs.
# How does it work
Let's say you have an application that uses the Vue I18n. Whenever installed and properly included, the Vue I18n Phrase In-Context Editor hooks up directly with the core of the Vue I18n API and works as a middleware for all your translations.
Basically, what we do is we override the Vue I18n's
formatter option the same way as one would do while trying to use a custom formatter. Our custom formatter (VueI18nPhraseFormatter) converts every translation key into the format understandable by the Phrase In-Context Editor. This allows us to gather an synchronize texts between Phrase.com and your app.