Mudahnya Setup Internasionalisasi Bahasa di Vue.js

Belajar setup internationalization (i18n) dalam project Vue.js

i18n visualisasi (sumber : https://make.wordpress.org)

Internationalization (i18n) dalam sebuah software berarti ketika software tersebut mendukung beberapa bahasa. Fitur ini tentu akan sangat membantu terutama bila software Anda memang ditargetkan pada lebih dari satu negara sehingga mengharuskan mendukung beberapa variasi bahasa.

Di dalam project yang dibuat menggunakan Vue.js hal ini bisa dilakukan dengan mudah bahkan dalam hitungan menit kita sudah bisa menyelesaikan contoh sebuah aplikasi yang mendukung multi bahasa.

Berikut beberapa langkah untuk setup i18n di dalam Vue.js :

1. Install dependency

Kita akan menggunakan bantuan sebuah plugin yakni vue-i18n.
Bila menggunakan npm: 
npm install vue-i18n — save

atau bisa juga menggunakan yarn dengan perintah:
yarn add vue-i18n

2. Setup file locale

File locale ini berupa Json file yang berisi terjemahan dari berbagai kata yang akan digunakan dalam aplikasi kita. Misalnya saja kita ingin mendukung bahasa Indonesia dan bahasa Inggris dalam aplikasi kita, maka kita akan membuat dua file locale yakni id.json dan en.json.
Contoh file ini bisa dilihat di :
1. id.json
2. en.json

3. Setup plugin

Untuk menggunakan plugin tersebut kita bisa dengan mudah mendefinisikan bahasa yang akan kita pakai beserta file locale yang telah kita buat sebelumnya. Berikut adalah contoh setup plugin tersebut :

Menggunakan vue-i18n

Seperti terlihat, kita meng-import dua file json locale kita kemudian mendefinisikan default EN di dalam object VueI18n di dalam property locale, dan mendefinisikan bahasa lain yang tersedia dalam property messages.

4. Menyisipkan kedalam Vue Instance

Setelah membuat file diatas, kita kan menyisipkan setup file tadi ke dalam Vue Instance kita yang biasanya terdapat dalam file main.js. Berikut contoh kodenya :

Menyisipka i18n kedalam Vue Instance

Bisa dilihat ketika kita membuat new Vue({}), kita menyisipkan file setup i18n yang kita buat sebelumnya.

5. Menggunakan di HTML Template

Setelah langkah diatas dilakukan, maka kita bisa dengan mudah digunakan di html template kita dengan sintaks {{ $t(‘key’) }} dimana key adalah key yang terdapat pada file Json locale kita. Berikut adalah potongan kode penggunaan plugin vue-i18n di dalam HTML template :

Menggunakan vue-i18n di html template

Terlihat di gambar diatas kita membuat beberapa terjemahan dengan cara menggunakan sintaks : {{$t(‘tab.search’)}} dan juga {{$t(‘sidebar.about’)}}. Dengan kode ini berarti kita telah mendefinisikan sebuah key-value di dalam file json kita seperti contoh berikut :

Contoh json file i18n ID

6. Mengganti bahasa

Untuk mengganti bahsa kita hanya cukup mengganti locale dari instace plugin vue-i18n yang bisa diakses dengan this.$i18n di dalam masing-masing komponen kita. Berikut contoh kodenya :

Contoh kode untuk mengganti bahasa

Semua kode yang saya bagikan adalah potongan kode dalam project ChuckNorris yang bisa dilihat di :


ChuckNorris Versi English
ChuckNorris Versi Bahasa Indonesia

Bila ingin belajar lebih lanjut mengenai berbagai penggunaan vue-i18n ini Anda bisa langsung cek dokumentasinya di :


Demikian tulisan singkat dari saya, semoga bermanfaat.

Ditulis oleh Irfan Maulana
Like what you read? Give Irfan Maulana a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.