Introduction

Vue I18n Phrase In-Context Editor is a simple yet powerful package which helps you to integrate the Phrase Strings In-Context Editor (opens new window) into your existing VueJS app. The one and only prerequisite is to use the awesome Vue I18n (opens new window) library to handle all translation-related logic in your web application.

Why

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 Strings In-Context Editor (opens new window). 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 (opens new window). 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 (opens new window). Our custom formatter (VueI18nPhraseFormatter) converts every translation key into the format understandable by the Phrase Strings In-Context Editor (opens new window). This allows us to gather an synchronize texts between Phrase.com (opens new window) and your app.