將 Nuxt.js 串接的資料改寫成多國語系

書接上回

上次提到如何用 Nuxt.js 串接 data 做下拉式選單,接下來會繼續沿用該資料,並將之改寫為多國語系。

安裝 i18n

先來 i18n 一下:

Shell

在 nuxt.config.js 設定 i18n 的資料:

JS
nuxt.config.js

你可能會看到另外一種寫法,是直接在 nuxt.config.js 設定語系的資料夾和檔案:

JS
nuxt.config.js

但我的語系拆的很細,一個 component 會載入一個語系,所以會將語法寫在 components 檔案中。

準備語系檔

參考上一篇 navData 的資料,將他複製起來另存為 json 檔 (格式記得改一下):

JSON
tw/nav.json

記得 en 的語系也要準備喔。

改接多國語系

打開 navBar.vue,將之前寫的 fethData 整個刪除,然後加入 i18n 的設定:

JS
navBar.vue

接下來在 computed 裡,把 i18n 的語系檔寫回 navData

JS
navBar.vue

取名為 navData 是因為之前的 data 宣告了 navData 這個物件,因此只要修改 js code 即可,不用改上方 template 的 v-for 載入的資料,他會自動對接。

原則上到這一步,就可以看到資料囉,此時接的就是多國語系 json 的檔案。

可以做個簡單的切換看看效果:

HTML
navBar.vue

以上,是我目前使用 Nuxt.js 串接多國語系的方法,如果有更好或更簡單的方法,也歡迎分享給我唷,感謝。