create account

Internationalization of the Verto Wallet from Volentix using vue-i18n by helo

View this thread on: hive.blog |  peakd.com |  ecency.com
utopian-io · @helo · (edited)
$56.25
Internationalization of the Verto Wallet from Volentix using vue-i18n
![vuei18n+verto.png](https://cdn.steemitimages.com/DQmYoTBq9Dc1AqtYdJbXJwobFDtjcqeQgzQuhw3rmWER1DK/vuei18n+verto.png)

#### Repository
https://github.com/Volentix/verto

### New Features
- Internationalization of the whole project using vue-i18n
- Extraction of all strings and replaced by variables.
- Complete French translation

### What is Vue-i18n

[Vue I18n](https://kazupon.github.io/vue-i18n/) is internationalization plugin for Vue.js

- Easy: You can introduce internationalization into your app with simple API
- Powerful: In addition to simple translation, support localization such as pluralization, number, datetime ... etc
- Component-oriented: You can manage locale messages on single file component

### What is Verto

[Verto](https://verto.vdex.io/) is a multi-currency wallet that will allow access to the [Vdex](https://vdex.io/). Private keys are maintained in this wallet and are accessible only by its owner. Verto will also have integrative functionality of other DApps like orderbook settlement from VDEX and a crypto ratings and rankings dashboard from Vespucci.

When a trade is made on Vdex, the funds are temporarily locked until either the transaction is completed and the new funds become available, or the transaction is cancelled and funds are again available.

### How to Internationalize

I know that the Verto Project was using Vue so I pulled on my experience with [The Magic Frog](https://the-magic-frog.com) as I also [Internationalized it](https://steemit.com/utopian-io/@helo/the-magic-frog-in-french-development-update-by-helo).

The first step is to install Vue-i18n and that can be done like so: `npm i --save vue-i18n` and from that you should see some changes in your `package.json` file.

Next step was to create a plugin javascript file that would load the package we just installed and lay the grounds for the json translation files. 
![](https://cdn.steemitimages.com/DQmY6XWrQxqWs2xSvYs6vke3CyvTovaUaH3beL8aTNvnRJq/image.png) 

Now we can import our plugin and add it to the Vue object:
![](https://cdn.steemitimages.com/DQmYkmajnFfUDyUE2eCUrtGoxk5evnxstVwE1m3MDz5d2X5/image.png)

From our plugin file we chose english as our locale, but it would be nice to just be able to change that on the fly.  In modifying `src/renderer/components/Settings/SettingsView.vue` we are able to do just that with a simple dropdown.

![](https://cdn.steemitimages.com/DQmam9sBweVSWbrQLgT8fVjJGvgsfGgypyUfyJsNpdrGSdP/image.png)

We can't forget to add the available languages in the javascript section of the settings view.
![](https://cdn.steemitimages.com/DQmSVdL4uUrW4bmTy9yqD5unGot9iN2QQjAnZ2TQCwoLsX1/image.png)

The groundwork now done; we are set for the extraction of the strings and compilation of the strings asset.
![](https://cdn.steemitimages.com/DQmPfZt4EzR2jxzSNHhMaj31mhcXPEL7W4d1xkfaRnNDTHK/image.png)

I did those two tasks in parallel.  Moving the string to the `en.json` file and replacing it with the new variable I just made.  In this case `Welcome.welcometo`.
![](https://cdn.steemitimages.com/DQmSuHqeNWkcUeFk8pfMtJzHMUfbXmHnwPKt9NKosno6PDb/image.png)

Finally I translated the entire `en.json` into `fr.json`, here is a sample:
![](https://cdn.steemitimages.com/DQmbGJvQ7JkDuTrSbGzxQompdnTET4AwMchBfQXJyTpUPoE/image.png)

The wallet runs as an electron app, here is the settings view in French:
![](https://cdn.steemitimages.com/DQmY8KbBmNG5z57W1QfZ4yyAhvmrDEFGpkzD2AZL47Zod5e/image.png)

#### How to contribute

Simple! 1. fork, 2. modify, 3. submit a pull request to the official repository.


#### Proof of work
https://github.com/Volentix/verto/pull/144

#### GitHub Account
https://github.com/gluneau
πŸ‘  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 108 others
properties (23)
authorhelo
permlinkinternationalization-of-the-verto-wallet-from-volentix-using-vue-i18n
categoryutopian-io
json_metadata{"tags":["utopian-io","development","qc","volentix","verto"],"app":"steemit/0.1","image":["https://cdn.steemitimages.com/DQmYoTBq9Dc1AqtYdJbXJwobFDtjcqeQgzQuhw3rmWER1DK/vuei18n+verto.png","https://cdn.steemitimages.com/DQmY6XWrQxqWs2xSvYs6vke3CyvTovaUaH3beL8aTNvnRJq/image.png","https://cdn.steemitimages.com/DQmYkmajnFfUDyUE2eCUrtGoxk5evnxstVwE1m3MDz5d2X5/image.png","https://cdn.steemitimages.com/DQmam9sBweVSWbrQLgT8fVjJGvgsfGgypyUfyJsNpdrGSdP/image.png","https://cdn.steemitimages.com/DQmSVdL4uUrW4bmTy9yqD5unGot9iN2QQjAnZ2TQCwoLsX1/image.png","https://cdn.steemitimages.com/DQmPfZt4EzR2jxzSNHhMaj31mhcXPEL7W4d1xkfaRnNDTHK/image.png","https://cdn.steemitimages.com/DQmSuHqeNWkcUeFk8pfMtJzHMUfbXmHnwPKt9NKosno6PDb/image.png","https://cdn.steemitimages.com/DQmbGJvQ7JkDuTrSbGzxQompdnTET4AwMchBfQXJyTpUPoE/image.png","https://cdn.steemitimages.com/DQmY8KbBmNG5z57W1QfZ4yyAhvmrDEFGpkzD2AZL47Zod5e/image.png"],"links":["https://github.com/Volentix/verto","https://kazupon.github.io/vue-i18n/","https://verto.vdex.io/","https://vdex.io/","https://the-magic-frog.com","https://steemit.com/utopian-io/@helo/the-magic-frog-in-french-development-update-by-helo","https://github.com/Volentix/verto/pull/144","https://github.com/gluneau"],"format":"markdown"}
created2018-11-27 02:55:39
last_update2018-11-29 23:26:42
depth0
children12
last_payout2018-12-04 02:55:39
cashout_time1969-12-31 23:59:59
total_payout_value41.931 HBD
curator_payout_value14.316 HBD
pending_payout_value0.000 HBD
promoted1.000 HBD
body_length3,663
author_reputation121,547,934,535,311
root_title"Internationalization of the Verto Wallet from Volentix using vue-i18n"
beneficiaries
0.
accountsteemplus-pay
weight100
1.
accountutopian.pay
weight500
max_accepted_payout100,000.000 HBD
percent_hbd10,000
post_id75,967,526
net_rshares96,427,584,955,934
author_curate_reward""
vote details (172)
@emrebeyler · (edited)
$10.06
<center>![helow.jpg](https://cdn.steemitimages.com/DQmZM9mbcCS3qWre3wkk2Y249WGuTSNfsHRkTiau5UGEnh6/helow.jpg)></center>
<center><sup>Good guy @helo</sup></center>

It was a pleasure to read this post. Explaining the problem and the solution, code examples were perfect. 

Great contribution. :-)

***

Your contribution has been evaluated according to [Utopian policies and guidelines](https://join.utopian.io/guidelines), as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, [click here](https://review.utopian.io/result/3/2121222).

---- 
Need help? Write a ticket on https://support.utopian.io/. 
Chat with us on [Discord](https://discord.gg/uTyJkNm). 
[[utopian-moderator]](https://join.utopian.io/)
πŸ‘  , , , , , , , , , , , ,
properties (23)
authoremrebeyler
permlinkre-helo-internationalization-of-the-verto-wallet-from-volentix-using-vue-i18n-20181127t080355326z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"users":["helo"],"image":["https://cdn.steemitimages.com/DQmZM9mbcCS3qWre3wkk2Y249WGuTSNfsHRkTiau5UGEnh6/helow.jpg"],"links":["https://join.utopian.io/guidelines","https://review.utopian.io/result/3/2121222","https://support.utopian.io/","https://discord.gg/uTyJkNm","https://join.utopian.io/"],"app":"steemit/0.1"}
created2018-11-27 08:03:54
last_update2018-11-27 08:04:27
depth1
children2
last_payout2018-12-04 08:03:54
cashout_time1969-12-31 23:59:59
total_payout_value7.603 HBD
curator_payout_value2.457 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length791
author_reputation448,535,049,068,622
root_title"Internationalization of the Verto Wallet from Volentix using vue-i18n"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id75,977,169
net_rshares16,359,839,712,864
author_curate_reward""
vote details (13)
@helo ·
properties (23)
authorhelo
permlinkre-emrebeyler-re-helo-internationalization-of-the-verto-wallet-from-volentix-using-vue-i18n-20181129t233155634z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-11-29 23:31:57
last_update2018-11-29 23:31:57
depth2
children0
last_payout2018-12-06 23:31:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length49
author_reputation121,547,934,535,311
root_title"Internationalization of the Verto Wallet from Volentix using vue-i18n"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id76,120,844
net_rshares23,681,763,084
author_curate_reward""
vote details (43)
@utopian-io · 
Thank you for your review, @emrebeyler! Keep up the good work!
properties (22)
authorutopian-io
permlinkre-re-helo-internationalization-of-the-verto-wallet-from-volentix-using-vue-i18n-20181127t080355326z-20181129t204042z
categoryutopian-io
json_metadata"{"app": "beem/0.20.9"}"
created2018-11-29 20:40:45
last_update2018-11-29 20:40:45
depth2
children0
last_payout2018-12-06 20:40:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length62
author_reputation152,955,367,999,756
root_title"Internationalization of the Verto Wallet from Volentix using vue-i18n"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id76,114,702
net_rshares0
@papotus · (edited)
$0.03
With the state of the crypto markets, it is refreshing to see projects pushing ahead with such enthusiasm. Keep up the positive spirit and push on through! Great article. Thanks
πŸ‘  
properties (23)
authorpapotus
permlinkre-helo-internationalization-of-the-verto-wallet-from-volentix-using-vue-i18n-20181127t063531733z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-11-27 06:35:33
last_update2018-11-27 06:36:06
depth1
children0
last_payout2018-12-04 06:35:33
cashout_time1969-12-31 23:59:59
total_payout_value0.019 HBD
curator_payout_value0.006 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length177
author_reputation2,588,242,645,947
root_title"Internationalization of the Verto Wallet from Volentix using vue-i18n"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id75,974,589
net_rshares42,539,224,295
author_curate_reward""
vote details (1)
@shawnlauzon ·
$0.02
Nice work @helo! I used the same vue-i18n package with Venue and it has worked nice. Glad to see it here as well :)
πŸ‘  
properties (23)
authorshawnlauzon
permlinkre-helo-internationalization-of-the-verto-wallet-from-volentix-using-vue-i18n-20181127t200302562z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"users":["helo"],"app":"steemit/0.1"}
created2018-11-27 20:03:03
last_update2018-11-27 20:03:03
depth1
children0
last_payout2018-12-04 20:03:03
cashout_time1969-12-31 23:59:59
total_payout_value0.018 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length115
author_reputation4,649,687,551,153
root_title"Internationalization of the Verto Wallet from Volentix using vue-i18n"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id76,005,150
net_rshares40,311,178,338
author_curate_reward""
vote details (1)
@steem-plus ·
SteemPlus upvote
Hi, @helo!

You just got a **1.98%** upvote from SteemPlus!
To get higher upvotes, earn more SteemPlus Points (SPP). On your Steemit wallet, check your SPP balance and click on "How to earn SPP?" to find out all the ways to earn.
If you're not using SteemPlus yet, please check our last posts in [here](https://steemit.com/@steem-plus) to see the many ways in which SteemPlus can improve your Steem experience on Steemit and Busy.
properties (22)
authorsteem-plus
permlinkinternationalization-of-the-verto-wallet-from-volentix-using-vue-i18n---vote-steemplus
categoryutopian-io
json_metadata{}
created2018-11-28 00:26:51
last_update2018-11-28 00:26:51
depth1
children0
last_payout2018-12-05 00:26:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length431
author_reputation247,952,188,232,400
root_title"Internationalization of the Verto Wallet from Volentix using vue-i18n"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id76,014,695
net_rshares0
@steem-ua · 
#### Hi @helo!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
**Feel free to join our [@steem-ua Discord server](https://discord.gg/KpBNYGz)**
properties (22)
authorsteem-ua
permlinkre-internationalization-of-the-verto-wallet-from-volentix-using-vue-i18n-20181127t082149z
categoryutopian-io
json_metadata"{"app": "beem/0.20.9"}"
created2018-11-27 08:21:51
last_update2018-11-27 08:21:51
depth1
children0
last_payout2018-12-04 08:21:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length283
author_reputation23,214,230,978,060
root_title"Internationalization of the Verto Wallet from Volentix using vue-i18n"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id75,977,694
net_rshares0
@steemdunk ·
steemdunk-reply-1543323403346
<div class="pull-left">
  <img src="https://steemitimages.com/DQmUPMtijhGPhMzWGPewaCwyGhAkpEmakB5vEEiUDEeEHw7/steemdunk-logo-100x.png">
</div>

Hello, as a member of @steemdunk you have received a free courtesy boost! Steemdunk is an automated curation platform that is easy to use and built for the community. Join us at https://steemdunk.xyz

Upvote this comment to support the bot and increase your future rewards!
properties (22)
authorsteemdunk
permlinksteemdunk-reply-1543323403346
categoryutopian-io
json_metadata{}
created2018-11-27 12:56:45
last_update2018-11-27 12:56:45
depth1
children0
last_payout2018-12-04 12:56:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length418
author_reputation1,828,858,777,968
root_title"Internationalization of the Verto Wallet from Volentix using vue-i18n"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id75,986,579
net_rshares0
@steemitboard · 
Congratulations @helo! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

<table><tr><td>https://steemitimages.com/60x70/http://steemitboard.com/@helo/payout.png?201812010802</td><td>You received more than 2000 as payout for your posts. Your next target is to reach a total payout of 3000</td></tr>
</table>

<sub>_[Click here to view your Board of Honor](https://steemitboard.com/@helo)_</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-helo-20181201t091844000z
categoryutopian-io
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2018-12-01 09:18:42
last_update2018-12-01 09:18:42
depth1
children0
last_payout2018-12-08 09:18:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length775
author_reputation38,975,615,169,260
root_title"Internationalization of the Verto Wallet from Volentix using vue-i18n"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id76,189,466
net_rshares0
@steemitboard · 
Congratulations @helo! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

<table><tr><td>https://steemitimages.com/60x70/http://steemitboard.com/@helo/voted.png?201812050819</td><td>You received more than 6000 upvotes. Your next target is to reach 7000 upvotes.</td></tr>
</table>

<sub>_[Click here to view your Board of Honor](https://steemitboard.com/@helo)_</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



**Do not miss the last post from @steemitboard:**
<table><tr><td><a href="https://steemit.com/steemitboard/@steemitboard/5jrq2c-steemitboard-saint-nicholas-day"><img src="https://steemitimages.com/64x128/http://i.cubeupload.com/mGo2Zd.png"></a></td><td><a href="https://steemit.com/steemitboard/@steemitboard/5jrq2c-steemitboard-saint-nicholas-day">Saint Nicholas challenge for good boys and girls</a></td></tr></table>

> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-helo-20181205t092014000z
categoryutopian-io
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2018-12-05 09:20:15
last_update2018-12-05 09:20:15
depth1
children0
last_payout2018-12-12 09:20:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,169
author_reputation38,975,615,169,260
root_title"Internationalization of the Verto Wallet from Volentix using vue-i18n"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id76,388,855
net_rshares0
@steemitboard · 
Congratulations @helo! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

<table><tr><td>https://steemitimages.com/60x70/http://steemitboard.com/@helo/comments.png?201812051803</td><td>You made more than 800 comments. Your next target is to reach 900 comments.</td></tr>
<tr><td>https://steemitimages.com/60x70/http://steemitboard.com/@helo/commented.png?201812051803</td><td>You got more than 600 replies. Your next target is to reach 700 replies.</td></tr>
</table>

<sub>_[Click here to view your Board of Honor](https://steemitboard.com/@helo)_</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



**Do not miss the last post from @steemitboard:**
<table><tr><td><a href="https://steemit.com/steemitboard/@steemitboard/5jrq2c-steemitboard-saint-nicholas-day"><img src="https://steemitimages.com/64x128/http://i.cubeupload.com/mGo2Zd.png"></a></td><td><a href="https://steemit.com/steemitboard/@steemitboard/5jrq2c-steemitboard-saint-nicholas-day">Saint Nicholas challenge for good boys and girls</a></td></tr></table>

> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-helo-20181205t185850000z
categoryutopian-io
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2018-12-05 18:58:48
last_update2018-12-05 18:58:48
depth1
children0
last_payout2018-12-12 18:58:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,356
author_reputation38,975,615,169,260
root_title"Internationalization of the Verto Wallet from Volentix using vue-i18n"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id76,411,964
net_rshares0
@utopian-io · 
Hey, @helo!

**Thanks for contributing on Utopian**.
We’re already looking forward to your next contribution!

**Get higher incentives and support Utopian.io!**
 Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via [SteemPlus](https://chrome.google.com/webstore/detail/steemplus/mjbkjgcplmaneajhcbegoffkedeankaj?hl=en) or [Steeditor](https://steeditor.app)).

**Want to chat? Join us on Discord https://discord.gg/h52nFrV.**

<a href='https://steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1'>Vote for Utopian Witness!</a>
properties (22)
authorutopian-io
permlinkre-internationalization-of-the-verto-wallet-from-volentix-using-vue-i18n-20181127t115124z
categoryutopian-io
json_metadata"{"app": "beem/0.20.9"}"
created2018-11-27 11:51:27
last_update2018-11-27 11:51:27
depth1
children0
last_payout2018-12-04 11:51:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length586
author_reputation152,955,367,999,756
root_title"Internationalization of the Verto Wallet from Volentix using vue-i18n"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id75,984,145
net_rshares0
Help/Feedback