前端框架御三家之一的 Vue，在 2020 年第四季迎來的第三代版本，代號為 One Piece。雖說已略為上手 2.0 版，決定藉由 HiSKIO 2020 Vue3 專業職人 的課程，來加速自己的熟悉程度。這篇會筆記下如何在 Nuxt 中整合第三方套件，並實作包裝 cookie & localStorage。
課程相關資訊
[連結]：https://hiskio.com/courses/419/lectures/20835
本篇範圍：Chapter 5 ( 整合 & 製作Nuxt 套件 ) ，一共有 10 篇
請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。
筆記
1. 請先注意你所要使用的套件，有無支援 SSR
2. 自行整合的套件，視同一個 Plugins，在 nuxt.config.js 載入進來
3. 不過要注意的是：套件的 CSS 有無辦法吃到。如果無法吃到，那需要自行載入
4. 你也可以自行撰寫 plugin，以包裝 localStorage 方法為例子
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// plugins/localStorage.js export default({app}, inject){ inject("localStorage",{ get(key = ""){ const obj = localStorage.getItem(key) if(!obj) return {} // 如果找不到資料，儘量回傳 {} 而非 null return JSON.parse(obj) }, set(key = "", val = {}){ localStorage.setItem(key, JSON.stringify(val)) }, remove(key = ""){ localStorage.removeItem(key) }, removeAll(){ localStorage.clear() } }) } |
