Langkah-langkah memasang i18n di Vue.js project

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:

atau bisa juga menggunakan yarn dengan perintah:

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 :

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 :

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 :

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 :

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 :

Semua kode yang saya bagikan adalah potongan kode dalam project ChuckNorris yang bisa dilihat di : https://github.com/mazipan/chucknorris/


Bila ingin belajar lebih lanjut mengenai berbagai penggunaan vue-i18n ini Anda bisa langsung cek dokumentasinya di : https://kazupon.github.io/vue-i18n/en/.

 

Tulisan ini juga telah dipublikasikan di Medium: https://medium.com/vuejs-id/mudahnya-setup-internationalisasi-bahasa-di-vue-js-2b7d00ef3c1