Internationalize di NUXT dengan Vue-i18n

Kebetulan ada permintaan membuat fitur ubah bahasa di aplikasi yang sedang dibuat, karena sedang mengerjakan di NUXT saya nemu nuxt-i18n di bagian community, namun gagal saya terapkan mungkin saya yang kurang sabar dalam ngedebug. Akirnya saya ikuti pepatah kuno “banyak jalan menuju Roma” karena yang itu gak berhasil, saya cari cara lain, akhirnya saya menemukan cara yang bagi saya jauh lebih mudah yaitu dengan vue-i18n. Bagaimana caranya? Langsung saja.

Dalam tulisan ini tidak akan membahas bagaimana mengubah seluruh konten, di sini yang diubah hanya sekadar label-label dari menu ataupun judul sebuah halaman.

Di sini perubahan bahasa memanfaatkan query string bukan segment sehinga hasil akhirnya seperti berikut

http://blog.arsmp.com/?lang=id

bukan

http://blog.arsmp.com/id/

Saya berasumsi semua udah pasang NUXT dan lainnya, maka untuk memasang plugin vue-i18n kita cukup ketikan perintah berikut

npm i vue-i18n

Tunggu sampai selesai.

Persiapan

Saya di sini membuat 2 halaman saja index dan about dan satu komponen navbar.

index.vue

about.vue

components/navbar.vue

Sehingga tampilannya akan sebagai berikut

Untuk bahasa kita akan siapkan lokasi atau berkas terjemahan di root folder, tambahkan folder baru, saya beri nama locales dan di dalamnya saya tambahkan berkas json bahasa.

locales
├── en.json
└── id.json

Isi masing-masing berkas seperti berikut
id.json

{
  "links": {
    "home": "Beranda",
    "about": "Tentang"
  },
  "pages": {
    "home": "Ini Beranda !!11!!!11",
    "about": "Ini Halaman Tentang Kami !!11!!!"
  }
}

en.json

{
  "links": {
    "home": "Home",
    "about": "About"
  },
  "pages": {
      "home": "This Is HOMEPAGE !!11!!!11",
      "about": "This Is ABOUT !!11!!!"
  }
}

Selanjutnya kita akan buat plugin buat berkas baru lokasi berikut plugins/i18n.js

import Vue from "vue"
import VueI18n from "vue-i18n"
Vue.use(VueI18n)

export default ({ app, store }) => {
    // di sini kita akan memanfaat kan store (vuex)
    app.i18n = new VueI18n({
    // `locale` akan mengambil dari locale default di store(vuex)
    locale: store.state.locale,
    fallbackLocale: "id", //selalu gunakan ID jika kaga ada Inggris
    messages: {
      //lokasi file terjemahan
      en: require("~/locales/en.json"),
      id: require("~/locales/id.json")
    }
  })
}

Setelah plugin yang kita butuhkan adalah middleware dimana dia akan mengatur bahasa semua halaman.
middleware/i18n.js

export default function({ isHMR, app, store, route, params, error, redirect }) {
  // ambil  
  const defaultLocale = app.i18n.fallbackLocale
  // jika halaman bersumber dari url langsung atau hot reload abaikan saja
  if (isHMR) return
  // jika tidak ada query string 'lang' ambil defaultlocale yaitu id
  let locale = route.query.lang || defaultLocale
  // jika tidak ditemukan di state vuex paksa jadi id
  if (store.state.locales.indexOf(locale) === -1) {
    locale = defaultLocale
  }
  //ubah state locale jadi locale yang dipilih
  store.commit("SET_LANG", locale)
  // Set locale dari query string '?lang='**''
  app.i18n.locale = store.state.locale
}

Dari plugin maupun middleware semuanya menggunakan store maka dari itu kita buat store(vuex) terlebih dahulu. Buat berkas index.js di folder store
store/index.js

export const state = () => ({
  locales: ["id", "en"],
  locale: "id"
});

export const mutations = {
  SET_LANG(state, locale) {
    if (state.locales.indexOf(locale) !== -1) {
      state.locale = locale;
    }
  }
};

Oke persiapan awal sudah, selanjutnya bahan-bahan di atas kita tambahkan di nuxt.config.js

module.exports = {
// ... konfigurasi lainnya
plugins: ["plugins/i18n.js"],
  router: {
    middleware: ["i18n"]
  }
// konfigurasi lainnya
}

Selanjutnya jalankan aplikasi

npm run dev

Mengubah Bahasa

Untuk mengubah bahasa kita cukup tambah satu methods di navbar, dan juga tambahkan query string di target url.

Sekarang coba ubah pilih dropdown pilih bahasa dan perhatikan url. Bertambah query string namun label-label tidak berubah.

Agar berubah itu mudah, cukup ubah label yang diubah seperti berikut

Pada navbar

 

                {{$t('links.home')}}
            
            

                {{$t('links.about')}}
            

Pada masing-masing konten halaman
index.vue

about.vue

Lalu perhatikan kembali.

Semoga bermanfaat ~

Referensi:
https://medium.com/@helena.wu87/how-to-internationalize-your-next-nuxt-project-using-vue-i18n-d9c51e28a564

Repositori:
https://gitlab.com/ariesmaulana/nuxt-internationalize