iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
影片教學

Nuxt 3 快速入門 系列

在使用 Vue 3 開發網站可能會面臨需要做 SEO 的情境,為了解決該情境問題,你可能會找到使用 Vite 做預渲染或其他方式,Nuxt 3 也是其中一個解決方案,且有更多強大的功能,目前 Nuxt 3 已是穩定版本,你可以使用它來實現 SSR 來解決 SEO 痛點。
本系列以影片教學搭配筆記的方式來快速入門 Nuxt 3,所以你可能需具備些 Vue 3 基礎,我將從搭建 Nuxt 3 開發環境、頁面路由與佈局一直到使用 Nuxt 3 建立 SEO 所需的資訊做些分享及介紹,讓你有個概念並嘗試用 Nuxt 3 來做 SSR 或 SSG,進而解決 Vue 3 SPA 不好做 SEO 的問題。

鐵人鍊成 | 共 30 篇文章 | 24 人訂閱 訂閱系列文 RSS系列文
DAY 11

[影片教學] Nuxt 3 模組 (Modules)

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 使用 NuxtIcon 模組 安裝 NuxtIcon 套件...

2023-09-26 ‧ 由 Ryan 分享
DAY 12

[影片教學] Nuxt 3 路由中間件 (Route Middleware)

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立路由頁面 建立 About 頁面 在 pages 目錄下...

2023-09-27 ‧ 由 Ryan 分享
DAY 13

[影片教學] Nuxt 3 Server API

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立第一個 Server API 在 server/api...

2023-09-28 ‧ 由 Ryan 分享
DAY 14

[影片教學] Nuxt 3 渲染模式 (Rendering Modes)

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 客戶端渲染 Client-Side Rendering (C...

2023-09-29 ‧ 由 Ryan 分享
DAY 15

[影片教學] Nuxt 3 資料獲取 (Data Fetching)

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立 Server API 在 server/api 目錄下...

2023-09-30 ‧ 由 Ryan 分享
DAY 16

[影片教學] Nuxt 3 狀態管理 (State Management)

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立路由頁面 在 pages 目錄下建立一個檔案 ./pag...

2023-10-01 ‧ 由 Ryan 分享
DAY 17

[影片教學] Nuxt 3 使用 Pinia 進行狀態管理

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 安裝 Pinia 與 Nuxt Pinia 模組 在專案中安...

2023-10-02 ‧ 由 Ryan 分享
DAY 18

[影片教學] Nuxt 3 Runtime Config & App Config

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 使用 Runtime Config 開啟專案下 nuxt.c...

2023-10-03 ‧ 由 Ryan 分享
DAY 19

[影片教學] Nuxt 3 串接 Google OAuth 登入

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立 Google OAuth 用戶 ID 前往 Googl...

2023-10-04 ‧ 由 Ryan 分享
DAY 20

[影片教學] Nuxt 3 Cookie 的設置與使用

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 使用 useCookie 來設定 Cookie 在 page...

2023-10-05 ‧ 由 Ryan 分享