iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Vue.js

Nuxt.js 3.x 筆記-打造 SSR 專案 系列

Nuxt.js 是基於 Vue.js 的輕量框架,結合 SSR 及 SPA,在頁面載入前即渲染,解決 Vue.js SEO 成效不佳的問題。

Nuxt 3 在 2022 年底推出了穩定版本,除了支援 TypeScript,更徹底的進行重構,精簡了核心、編譯速度更快,提升開發體驗。

這次將從基礎專案建立開始說明,介紹主要架構與功能、套件應用,以及如何提升 SEO,將學習過程筆記起來,加深印象!

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

D11:Nuxt 3.x Middleware 目錄-監聽路由變化

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Middleware 為 Nuxt 內的 路由守衛(Navigation Guards),相當於...

2023-09-22 ‧ 由 claire chang 分享
DAY 12

D12:Nuxt 3.x Assets vs Public 目錄-靜態資源管理

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Nuxt3 提供兩個資料夾 assets/ 以及 public/,用來管理靜態資源,像是圖片、CS...

2023-09-23 ‧ 由 claire chang 分享
DAY 13

D13:Nuxt 3.x API 請求方法-$fetch、useAsyncData、useFetch

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Nuxt3 提供了全域可使用的內建函式庫 $fetch 以及 composables useFe...

2023-09-24 ‧ 由 claire chang 分享
DAY 14

D14:Nuxt 3.x Server 目錄-建立 API

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Nuxt3 搭配了新的伺服器引擎 Nitro,讓我們能輕鬆建立 Server API,並在 Nux...

2023-09-25 ‧ 由 claire chang 分享
DAY 15

D15:Nuxt 3.x Server API 整合 MongoDB 實作,邁向全端第一步

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Nuxt3 搭配了新的伺服器引擎 Nitro,讓我們能輕鬆建立 Server API,並在 Nu...

2023-09-26 ‧ 由 claire chang 分享
DAY 16

D16:Nuxt 3.x Meta Tags 與 SEO 搜尋引擎優化

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Nuxt3 搭配 Unhead 套件,讓我們可以在專案內動態控制 <head> 標籤...

2023-09-27 ‧ 由 claire chang 分享
DAY 17

D17:Nuxt 3.x 自訂 Loading 效果

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Nuxt3 提供了預設進度條元件 <NuxtLoadingIndicator>,在路...

2023-09-28 ‧ 由 claire chang 分享
DAY 18

D18:Nuxt 3.x 搭配 CSS Framework-以 Bootstrap 5 為例

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Bootstrap 版本:v5.3.1Sass 版本:v1.63.6 在 Nuxt 專案中,我...

2023-09-29 ‧ 由 claire chang 分享
DAY 19

D19:Nuxt 3.x 狀態管理 State Management (1)-useState

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 專案開發過程中常會有狀態共享的需求。父子元件間資料傳遞可以使用 Props 和 $emit,或是...

2023-09-30 ‧ 由 claire chang 分享
DAY 20

D20:Nuxt 3.x 狀態管理 State Management (2)-Pinia

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 專案開發過程中常會有狀態共享的需求。昨天介紹了 Nuxt3 useState Composabl...

2023-10-01 ‧ 由 claire chang 分享