Vue.js

Gitloc + Vue Quick Start Guide

In this article, we'll show how you can use Gitloc with Vue.js using this sample project. This is a simple multilingual application based on Vue.js and i18next.

1. Get the Vue.js application

To start using Gitloc, you will first need to fork the sample project or create a new application from scratch using the sample creation guide.

If you wish, you can also use any Vue.js project that has translations clearly separated by locale into separate files. (i.e. /en.json, /common.en.json, /en/common.json etc.).

2. Connect remote repository to Gitloc

To start automation the translation process we should connect the remote repository to the Gitloc.

• Open Gitloc platform and sign in

• Choose or create a team to work with

• Click the "Add repository" button and follow the instructions.

3. Configure gitloc.yaml for the repository

All we need to set up automatic translations is to configure gitloc.yaml in the root folder of our repository.

config:
    defaultLocale: en
    locales:
        - en
        - de
    directories:
        - public/locales

110B

gitloc.yaml

All available configuration options are described in the gitloc.yaml Reference.

We are ready to translate!

Gitloc automatically detects changes in the localization files of your repository and translate new or modified values. As a result the translations will be committed to the base branch or Gitloc will create a new pull request to review.

Now let's translate the application.

1. Make changes to the localization files

You can now edit defaultLocale files (e.g. /en/common.json for defaultLocale: en). All new, changed or deleted values of these files will be processed by Gitloc in the next step.

For example, add a new key hello to /en/welcome.json

/public/locales/en/welcome.json

{
  "title": "GitLoc example",
  "subtitle": "You’ve successfully created a project with {vite} + {vue}. ",
  "hello": "Hello world"
}

2. Push changes

Commit and push all changes into the remote repository.

$ git commit -m "Initial commit"
$ git push origin main

Gitloc will detect new commits and will soon update all localization files for locales other than the default.

3. Pull translations

At the end we only have to pull translations to our local repository.

If you have your gitloc.yaml configured as result: push, then Gitloc will push translations to your repository and all you have to do is pull changes from it.

$ git pull origin main

If your gitloc.yaml configured as result: pull-request, Gitloc will create a new pull request and you will have to review and merge it.