Localization of any type of application, be it a web, mobile or desktop app, can be tedious and irritating. In this article, I’ll show you how can you handle that easily with Localazy and in a way that you’ll spend your time effectively and actually enjoy the localization process. vue-18n Localazy’s most prominent features are a pro-active review process, highly accurate translation memory supported by community-shared translations and non-disturbing, and crystal clear UI which is not bloated with rarely used options. And as I’ll show shortly, it works seamlessly with . Thanks to that, managing translation strings, even with open-source projects where anybody can contribute (with varying quality), is a piece of cake 🍰. vue-i18n tldr; sign up for , Localazy with English as source language and option enabled, create an app Use community translations (ShareTM) select integration option and install Localazy , Vue.js CLI install and configure vue-i18n create in root and paste in and modify the localazy.json configuration create folder and in it create . Add any translation key-value pair, e.g. locales en.json run , localazy upload in Localazy, add any language. Then review it and accept the suggested phrases, run and check folder for the new locale, localazy download locales run the app npm run serve Sign up and app creation First of all, let’s on Localazy and create a . In this article, we’ll use English as the source language, but you can generally choose any other. Make sure that the option is enabled. is the highly accurate translation memory I mentioned. Thanks to it, most of the new applications have as much as 50 % of their strings automatically available for translation into 80+ languages. set up a new account new application Use community translations (ShareTM) ShareTM Proceed to create the app. Afterward, select on the integration screen. We’ll use the powerful CLI tool to manage the upload and download of phrases. is available for Linux, MacOS and Windows. Note the read and write keys in step 2. We’ll need it shortly. Vue.js Installation Set up Vue project If you don’t want to follow the step-by-step guide here, you can take a look at the . Otherwise, stay awhile and listen. finished repo Create a new Vue project with (if you don’t have Vue CLI installed, run ) and use preset. Once everything is installed, add . vue create vue-i18n-example npm install -g @vue/cli Vue 2 vue-i18n npm install vue-i18n Now it’s time to add integration with Localazy. Create in the root folder and paste the following configuration. Use the write and read keys from the step 2 of the integration guide page. localazy.json { : , : , : { : , : }, : { : }
} "writeKey" "your-write-key" "readKey" "your-read-key" "upload" "type" "json" "files" "src/assets/locales/en.json" "download" "files" "src/assets/locales/${lang}.json" Additionally, create folder and file inside. Since we’ve set English to be the source language, this file will contain the source phrases for our application. You can fill in any key-value pair you like. I’ll add this. src/assets/locales en.json { : , : } "hello" "Hello, my friend" "stay_awhile_and_listen" "Stay awhile and listen" At this point, the application is ready to have localization managed by Localazy. Before we upload the first bunch of strings, let’s prepare a test scenario with to get it off our plates. vue-i18n First modify . main.js Vue App VueI18n ; en ; messages = {
    en,
}

Vue.use(VueI18n); i18n = VueI18n({ : ,
    messages
})


Vue.config.productionTip = Vue({
  i18n, : h(App),
}).$mount( ) import from 'vue' import from './App.vue' import from "vue-i18n" import from "../src/assets/locales/en.json" const const new locale 'en' false new render => h '#app' And then App.vue < > template < = > div id "app" < > h1 {{$t('hello')}} </ > h1 < > h2 {{$t('stay_awhile_and_listen')}} </ > h2 </ > div </ > template < > script { : ,
} export default name 'App' </ > script < > style { : Avenir, Helvetica, Arial, sans-serif; : antialiased; : grayscale; : center; : ; : ;
} #app font-family -webkit-font-smoothing -moz-osx-font-smoothing text-align color #2c3e50 margin-top 60px </ > style When you run , you should see the two English phrases. Nothing fancy so far. npm run serve Uploading and downloading phrases Let’s upload the English file to Localazy. From the root folder, run the following command localazy upload -s The argument stands for simulate. It is a good practice to test out the configuration without uploading anything to assure that nothing unexpected happens (such as some of the key-value pairs are incorrectly matched and override each other). The output should be something along these lines, depending on the CLI version -s Localazy CLI, v1.1.9
Advanced file uploader/downloader for the Localazy translation platform.

Read more information at https://localazy.com/docs/cli

Uploading...
  - deprecate missing: false
  - import as new: false
  - app version: 0
  - groups: (default only)
  - folder: .

Processing files...

./src/assets/locales/en.json
  (file=file.json, lang=inherited, type=json)

Verifying...

Validating...

Done. Everything worked out well and our English file was matched. This time let’s let upload it for real. localazy upload Refresh your app page and you should see the English language on the list. Open the tab and there you find a couple of languages with info about the percentage of automated translations. It is possible that you will see either 50 % or 100 %. The automated matching with ShareTM improves all the time and it’s likely that thanks to this article you would have all the phrases automatically translated. How cool is that? 🙂 Add languages One way or another, look up German and add it to your app. You’ll see there is a review button. Every time ShareTM provides a translation suggestion it will have candidate status. This means that it will be ready for review and any reviewer can either approve it or decline. Go ahead and approve the suggested phrase(s). In case that the ShareTM did not translate 100 % of phrases, come back to the languages list and notice that the review button now reads translate. Localazy recognizes that there is nothing to review but still something to translate, so it offers you the next most likely action in one click. Translate the other phrase (you may use a suggested phrase on the translation page). This time you do not need to go through the review process since you are a trusted translator as owner by default, so the translation is immediately approved. It’s time to go back to the Vue project. localazy download With this command, you’ll download all the newly accepted phrases and newly added languages. In the folder, we can see there is newly . locales de.json The last thing to be done is to update and add the German locale resource file. main.js Vue App VueI18n ; en ; de ; messages = {
    en,
    de
}

Vue.use(VueI18n); i18n = VueI18n({ : ,
    messages
})


Vue.config.productionTip = Vue({
  i18n, : h(App),
}).$mount( ) import from 'vue' import from './App.vue' import from "vue-i18n" import from "../src/assets/locales/en.json" import from "../src/assets/locales/de.json" const const new locale 'de' false new render => h '#app' Now when you run the app again, you’ll see that the phrases were correctly translated to German. Closing words I hope you’ve enjoyed this short intro into Localazy with . If you’d like to get closer to us, join us on . vue-i18n Discord Previously published at https://localazy.com/blog/how-to-localize-vuejs-app-with-vue-i18n-and-localazy

BUNCH

Automating Localization with Github Actions: A How-To Guide

Localize your app the modern way!

Too Long; Didn't Read

Make resilience your competitive advantage

How to Add Localization to Vue.js App with vue-i18n and Localazy

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Don't waste your time handling Android's strings XML files manually!

10 Things Every Beginner Should Know When Learning Javascript And React

10 security tips for frontend developers

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

Don't waste your time handling Android's strings XML files manually!

10 Things Every Beginner Should Know When Learning Javascript And React

10 security tips for frontend developers

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps