系列文章
[Day 11] Nuxt 3 自訂共用的函式 - 組合式函式 (Composables) 與通用函式 (Utils) 的差異和選擇
前言 Nuxt 3 預設的自動載入 (Auto Imports)，其中包含了 composables 與 utils 目錄，這兩個目錄通常會用來定義一些專案中常...
[Day 12] Nuxt 3 使用插件 (Plugin) 整合載入第三方套件 - 導入支援 Vue 3 的套件或插件
前言 為了不重複造輪子，在專案中導入現成的套件是常見的做法，但若這個套件在 Nuxt 3 沒有專用的模組或插件，再導入的過程中可能會遇到一些問題，多數情況我們可...
[Day 13] Nuxt 3 使用路由中間件（Middleware）實作身份驗證與實作技巧
前言 Nuxt 3 提供了一個路由中間件的框架，我們只要再專案目錄 middleware 下定義好路由中間件，就可以在路由切換之間來實現一些功能，包含了身份驗證...
[Day 14] Nuxt 3 最佳化圖片 動態調整請求控制圖片大小 - Nuxt Image
前言 Nuxt Image 是 Nuxt 的一個模組，顧名思義讓你可以在 Nuxt 專案中使用圖片時，可以幫助你最佳化圖片，Nuxt Image 它所做的是，使...
[Day 15] Nuxt 3 使用 useHead 動態設定 HTML Head 與 Meta Tag
前言 如果要在 Vue 中更改頁面的標題或 HTML Meta Tag，你可能使用或聽過 vue-meta，它能幫助你方便的更改 HTML Head、Meta...
[Day 16] Nuxt 3 最佳管理 Meta Tag 的方式 - 使用 useSeoMeta 與 useServerSeoMeta
前言 在 Nuxt 3 我們可以使用 useHead 來設定 Meta Tag，你可以完全的掌握與控制 Meta 標籤的撰寫，不過為了應付各個平台或眾多的自訂標...
[Day 17] Nuxt 3 頁面載入效果 - 使用 NuxtLoadingIndicator 元件與實作自訂 Loading 元件
前言 當路由頁面跳轉時，可能會因為下一個頁面阻塞而導致畫面卡住，使用者無法得知頁面的載入狀況，Nuxt 3 提供一個 <NuxtLoadingIndica...
[Day 18] Nuxt 3 自動產生連結縮圖 OG Image - SEO 搜尋引擎最佳化系列
前言 在做網頁的 SEO 搜尋引擎最佳化時，你可以在 og:image 或 twitter:image 設定圖片的網址，來讓搜尋引擎爬蟲收錄網頁縮圖或在分享連結...
[Day 19] Nuxt 3 自動產生 Sitemap 網站地圖 - SEO 搜尋引擎最佳化系列
前言 Sitemap 網站地圖基本上都是由網頁開發人員進行製作，網站地圖內容包含了整個網站的連結，例如你的網站有首頁、文章列表、文章詳細頁面等，這些連結如果你想...
[Day 20] Nuxt 3 管理網站的 robots.txt 與 Robots Tags - SEO 搜尋引擎最佳化系列
前言 搜尋引擎之所以能搜尋到世界各底的網頁，全歸功於網路爬蟲 (Web crawler)，也有人稱之為網路蜘蛛 (Spider)，爬蟲是一種機器人即是搜尋引擎檢...