Multiple Language ด้วย i18n บน nuxt.js Framework

สวัสดีครับ พอดีผมได้มีโอกาสลองใช้งานเจ้าตัว i18n เห็นว่าเจ้าตัวเนี่ย มันใช้งานค่อนข้างง่ายพอสมควรครับ วันนี้เลยจะมาแชร์ถึงการ setting i18n บนตัว nuxt.js เพื่อใช้งาน multiple language ทั้งตัว Data, Link, Path, URL ให้เป็นแบบหลายภาษา

“ แล้ว i18n คืออะไรกัน ???? ”

i18n ย่อมาจาก Internationalization ซึ่งเลข 18 มาจากจำนวน 18 ตัวอักษรระหว่างตัว i ถึงตัว n และเริ่มด้วย i จบด้วย n ตรงกลางมี 18 ตัวอักษรเลยกลายเป็น i18n นั้นเอง

ส่วนมีสาระครับ ….

i18n คือ library ช่วยในการพัฒนา application ให้สามารถรองรับได้หลายภาษา หรือเรียกอีกอย่างว่า localization

และเพื่อไม่ให้เป็นการเสียเวลาเรามาเริ่มทำกันเลยครับ

สำหรับใครที่สนใจดู source code ได้ที่นี่เลยครับ
>> https://github.com/noppadollanngain/nuxt-i18n-multiple-language.git

ก่อนอื่นเราต้องมี node.js ก่อนนะครับ

ทำการติดตั้ง nuxt.js

yarn create nuxt-app

ติดตั้ง library ตามนี้ครับ

yarn add bootstrap-vue // library ใข้งาน css ของ bootstrap
yarn add node-sass     // library ไฟล์ scss
yarn add nuxt-i18n     // library หลายภาษา ( พระเอกของ blog ครับ )
yarn add sass-loader   // library load file scss มาใช้งาน

เมื่อทำการติดตั้งเสร็จแล้วจะได้หน้า package.json ประมาณนี้ครับ

หลังจากติดตั้งเสร็จแล้วเรามาเตรียมส่วนแสดงผลกันก่อนครับ

ทำการสร้างไฟล์ใน components ชื่อว่า Layouts ส่วนนี้จะเป็นไฟล์ component ทั้งหมดที่จะทำเป็น base layout ภายในผมทำขึ้น 2 ไฟล์

ไฟล์ index จะเป็นไฟล์รวม component Layouts

Header >> ส่วนหัว
Footer >>ส่วนท้าย

สร้างไฟล์ PageComponent สำหรับใช้งานทุกหน้า

สร้าง page เพื่อรองรับการเเสดงผลแต่ละหน้า

แก้ไขไฟล์ default.vue ใน layouts

สร้าง file json สำหรับส่วน Data หลายภาษา ( อันนี้ผมทำ thai กับ english ครับ )

ตัวอย่างไฟล์ Data ( th.json )

จากนั้น สร้างไฟล์เพื่อแก้ไข path url เป็นหลายภาษา

เมื่อทำข้างต้นเสร็จเราจะทำการเรียกใช้งานต่างๆ ผ่านไฟล์ nuxt.config.js

ส่วนอธิบายการใช้งาน code ครับ

computed: {    
 header () {      
  return this.$t('header')    
 },    
 availableLocales () {      
 return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale)     
 }  
}

เราเรียกใช้งานไฟล์ได้ผ่าน this.$t(….) ได้เลยครับ
ส่วน function availableLocales จะเป็น function get locales ที่เรามีทั้งหมดมา

ผลงานของเราก็จะได้ประมาณนี่ครับ

สรุป

การใช้งาน i18n ค่อนข้างเป็นที่นิยมเพราะรองรับในหลายๆ framework เช่น nuxt, react, vue เป็นต้น การใช้งานค่อนข้างง่ายไม่ซับซ้อนมากนัก และเมื่อมันรวมเข้ากับ nuxt ที่รองรับ SSR แล้วเราจะได้เว็บหลายภาษาที่มี SEO ที่ดีนั้นเอง