[指南] Nuxt3 腳本撰寫採坑記錄

隨著 Nuxt3 的正式版本上線,那就該來針對 Nuxt3 寫一個專屬於自己的範本,讓自己後續的專案能夠快速的引用。與 Nuxt2 相比,Nuxt3 有不小的改動,這邊筆記下撰寫時的採坑記錄。

nuxt-js-logo


內容

1. 使用 Mac M1 以後機型,會安裝到錯誤 esbuild 版本

這一點可以透過將你的 Node 大版本版號提升到至少 16 來解決。由於 Nuxt3 也有提及版本至少需要 16.11,所以將較為新的 Node 是必須的

2. ESLint

eslint 導入需要安裝 eslint @nuxtjs/eslint-config-typescript eslint-plugin-vue 這三個。同時檢查規則中需關閉 ‘vue/multi-word-component-names’: ‘off’ 和額外設定 vue/html-indent

3. Stylelint

stylelint 要根據你撰寫的 CSS 安裝相關的檢查工具。這邊以 scss 為例子:

postcss-html, sass, stylelint, stylelint-config-html, stylelint-config-recommended-scss, stylelint-config-standard

4. Pinia

Pinia 建議搭配 @pinia-plugin-persistedstate/nuxt 套件一起使用,可以讓狀態縱使重新整理後,仍會存在於 Cookie 或是 LocalStorage 中

5. vue-i18n

這個算是最為複雜的。vue-i18n 套件須作為一個 Plugin 在 server 端就自動引入,才能正常執行。因此在 client 端渲染時,必須要在 onmounted 再額外執行,才不會出錯。

[補充]:若你是用 Server-Side Rendering 並採用根據路徑是否帶有語系參數來決定顯示語言的,可以在 app.vue 中將語系設定同步到 pinia 中。

6. Axios 改用 ofetch

Nuxt3 改用 ofetch 套件進行包裝,成了一個可在 server 和 client 端運行的 API 串接方法。你會需要自行封裝,才能讓多個模組間能擁有相同底層 API 串接套件


程式碼

https://github.com/andy922200/nuxt3-typescript-template


參考資料

1. Nuxt3配置入門

按讚加入粉絲團

延伸閱讀