vue-i18n-phrase

vue-i18n-phrase

Extract all vue-i18n keys from your Vue.js projects. Then, tag and add keys to your Phrase account!

Installation

use vue-i18n-phrase anywhere with Yarn 2

yarn dlx vue-i18n-phrase

Phrase Access Token

To use this tool you will need a Phrase Access Token with read and write permissions. You can follow steps to generate one in your Phrase profile here.

Sync command

The sync command uses vue-i18n-extract to get vue-i18n keys out of our Vue.js source files. Then it will get all the keys from your a project in your Phrase account and see if there are any keys that are in yor Vue.js source files, but not in your Phrase project. Any keys that are missing are then uploaded to the account!

Example:

vue-i18n-phrase sync -v [PATH_TO_VUE_FILES] -a [PHRASE_ACCESS_TOKEN]

// for example

vue-i18n-phrase sync -v "./src/**/*.?(js|vue)" -a 1234567890

Options:

-v --vueFiles <vueFiles>                A file glob pointing to your Vue.js source files.

-a --accessToken <accessToken>          Phrase API access token

-p --projectID [projectID]              Phrase Project ID, defaults to the first project in your account, projectID can be found on projects page, then hovering over project and choosing ID

-t, --tags [tags]                       A comma separated list of any custom tags you would like to apply to the keys

-m --makeTranslation [makeTranslation]  If you would like the key path to be the translation in your default locale. Optionally set as a locale code to make translation in a non-default locale

-s --skipReport [skipReport]            Skip report generation

-o --outputDir [outputDir]              Directory for report files. Will default to ./phrase-reports

-d --dryRun [dryRun]                    Use if you do not want anything posted to Phrase

-h, --help                              output usage information

End To End I18N Solution

The goal of this project is to facilitate a full end to end solution for managing and fetching translations when using vue-i18n and Phrase. The ideal workflow is...

1. Write a Vue.js app using vue-i18n for translations.

Adding i18n support to your Vue.js apps is easy using the very stable and mature vue-i18n plugin.

2. On a push to version control, run a CI pipeline that extracts all vue-i18n keys and then uploads them to a specified project in a specified Phrase account.

This is solved by the vue-i18n-phrase cli tool, which is the main code in this git repository. But the desire is to make this run as part of a continuous integration pipeline, which is why there is a Dockerfile included in this repository. The Dockerfile is built and pushed to Dockerhub which makes it easy to use in most CI tools like Circle, Jenkins, and GitlabCI.

3. In the Vue.js app, request the translation keys for user's locale from a HTTP endpoint.

Phrase offers a great HTTP REST API for it's services. But it's not exactly what is needed to fit the use case. So, included in this repository is a serverless Function that abstracts the PhraseAPI and allows a GET request to be made with a locale code, and a list of tags to be added as query parameters to get a filtered list of translations. The data from the endpoint can be used by the lazy loading features of vue-i18n to asynchronously load the app translations.

Read how to deploy this function here.

:copyright: License

MIT