iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Vue.js

Nuxt 3 實戰筆記 系列

Nuxt 3 發布穩定版本已經過了將近一年,功能與版本也積極的在創新與維護,如果你還苦惱 Vue 或其他前端框架不好做 SEO 的問題,你一定要試試 Nuxt 3 帶給你前所未有的開發體驗,初次使用 Nuxt 3 的你也可以參考我的其他系列文章學習基礎概念,若你已經熟悉 Nuxt 3 所帶給你的開發體驗,在 SSR 與 SSG 及SEO 搜尋引擎最佳化中也已有了基本的概念,你可以藉由本系列更深入的暸解 Nuxt 3。
本系列著重在探索 Nuxt 3 更多的功能特性與模組,我將介紹 Nuxt CLI 、視覺化工具、SEO 系列、網站最佳化與分享解決方案等,讓你的網站有可能性以應付實戰需求。

鐵人鍊成 | 共 30 篇文章 | 53 人訂閱 訂閱系列文 RSS系列文 團隊啾嚕咕嚕跳起來
DAY 21

[Day 21] Nuxt 3 管理網站結構化資料標記 (Structured Data Markup) - SEO 搜尋引擎最佳化系列工具簡介

前言 在搜尋引擎最佳化 SEO 中,其中有一個最佳化項目是結構化資料標記 (Structured Data Markup),當你的網站設定好結構化的資料,將有助...

2023-10-06 ‧ 由 Ryan 分享
DAY 22

[Day 22] Nuxt 3 使用 SVG 的解決方案與更方便的使用 Icon 圖示

前言 網站的介面多多少少會放置圖示 (Icon),圖示的載入方式可以像圖片一樣以 png、jpg、webp 或 svg 等圖片格式來呈現,本篇將介紹如何在 Nu...

2023-10-07 ‧ 由 Ryan 分享
DAY 23

[Day 23] Nuxt 3 多國語系模組 Nuxt I18n 的初入門與基本使用方法

前言 Nuxt 3 整合 Vue I18n v9.x 多國語系的模組 Nuxt I18n,已經在 RC 階段準備釋出正式版,在使用上也穩定不少,這篇文章將簡單的...

2023-10-08 ‧ 由 Ryan 分享
DAY 24

[Day 24] Nuxt 3 多國語系模組 Nuxt I18n 的進階使用方法與 SEO 搜尋引擎最佳化

前言 Nuxt 3 整合 Vue I18n v9.x 多國語系的模組 Nuxt I18n,已經在 RC 階段準備釋出正式版,在使用上也穩定不少,這篇文章將介紹一...

2023-10-09 ‧ 由 Ryan 分享
DAY 25

[Day 25] Nuxt 3 深入靜態資源的使用 Public & Assets

前言 不管在 Vue 與 Nuxt 的開發,常會有需要使用圖片或靜態資源的時刻,例如,已經具有外部的圖片連結,我們很輕易的可以使用 URL 等方式來做載入,若是...

2023-10-10 ‧ 由 Ryan 分享
DAY 26

[Day 26] Nuxt 3 錯誤頁面 (Error Page) 與錯誤處理 (Error handling)

前言 網站開發過程與上正式環境後,難免會遇到一些 Bug 導致網站處理邏輯發生異常,甚至一小段的 JavaScript 的邏輯錯誤或未處理的拋出錯誤,可能導致整...

2023-10-11 ‧ 由 Ryan 分享
DAY 27

[Day 27] Nuxt 3 產生靜態網頁部署至 Cloudflare Pages 與持續自動部署

前言 Nuxt 3 的渲染模式,可以支援我們產生靜態的頁面,而這些預渲染的靜態網頁檔案,就很適合部署至靜態的託管平台來服務,例如 Cloudflare Page...

2023-10-12 ‧ 由 Ryan 分享
DAY 28

[Day28] Nuxt 3 建構打包與部署至 Cloudflare Workers

前言 Nuxt 3 的網站應用程式,可以根據實際業務需求來決定渲染的模式,而最終專案所建構打包的專案程式碼,也會因為模式的選擇而需要部署在不同的執行環境上,例如...

2023-10-13 ‧ 由 Ryan 分享
DAY 29

[Day 29] Nuxt 3 混合渲染 (Hybrid Rendering) 中的 SWR 與 ISR

前言 Nuxt 3 除了是一個 SSR 的框架外,也能允許網頁使用混合渲染 (Hybrid Rendering),混合渲染允許使用路由路徑的規則來決定不同的渲染...

2023-10-14 ‧ 由 Ryan 分享
DAY 30

[Day 30] Nuxt 3 版本的升級與套件升級的管理工具

Nuxt 3 版本的升級 目前 Nuxt 3 仍積極的在修正錯誤與添加新功能,版本更新的速度也不慢,相較去年底,目前正式版釋出後已經穩定許多,與其他大型的開源框...

2023-10-15 ‧ 由 Ryan 分享