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

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 ที่ดีนั้นเอง