本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

Nuxt3 搭配了新的伺服器引擎 Nitro，讓我們能輕鬆在 Nuxt 專內建立 Server API。Nitro 的優點包含跨平台支援 Node.js 與瀏覽器、支援 HMR、自動生成 API 路由等，讓 Nuxt 具備全端功能，接下來一起進行實作吧。

建立 API

• 在 server/ 目錄建立 API，Nuxt 會依據資料夾結構自動生成 API 路徑
• 使用 defineEventHandler() 建立事件處理器

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

Layouts 資料夾協助我們定義共用模板，將重複使用的版面提取到模板內全域共用，看起來跟 Components 有點像，那麼 Layouts 跟 Components 怎麼區分？可以將 Layouts 視為包覆在頁面外層的包裹元件，用來定義 Header、Sidebar、Footer 等共用版面或是元件

官方文件提到，如果整個專案只有一個模板，建議直接在 app.vue 定義即可

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

@nuxtjs/i18n 版本：v8.0.0-rc.3

多國語系讓我們的網站邁向國際市場，本篇將說明如何搭配 Nuxt3 整合模組 @nuxtjs/i18n 進行開發

@nuxtjs/i18n 簡介

• 整合 Vue I18n
• 自動產生路由
• SEO 搜尋引擎最佳化
• Lazy Loading 延遲載入
• 自動偵測語言並切換
• 多國語言支援不同域名

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

Bootstrap 版本：v5.3.1
Sass 版本：v1.63.6

在 Nuxt 專案中，我們可以自由選擇 CSS 預處理器、CSS 框架或是 UI Library 來定義樣式。在 CSS 框架百家爭鳴的時代，這幾年熱門的 Tailwind CSS、基於 Vue.js 開發的 Quasar、或是搭配 Vue3 開發的 Element Plus 都能快速上手，協助我們打造精美的網站。

由於工作上較常使用 Bootstrap 協作，本篇將以 Bootstrap 5 搭配 SCSS 進行說明。

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

Nuxt3 提供了預設進度條元件 <NuxtLoadingIndicator>，在路徑切換時顯示。也可以自訂共用元件來調整觸發時機或樣式。

閱讀更多

source: Nuxt.js and Vue.js

了解 Nuxt.js 之前，需先從 Vue.js 說起。Vue.js 是一個專注於視圖層的 JavaScript 框架，用於建立單頁應用程式（SPA，Single Page Application）。在 SPA 架構中，使用者首次訪問網站時會下載一個 HTML 文件和所有的 JavaScript 資源，之後的頁面切換和更新都是透過 JavaScript 動態完成，這樣的設計可以減少頁面重新載入的次數，進而提升使用者體驗。

不過，SPA 架構也存在一個主要缺點：搜尋引擎爬蟲只會讀取 HTML，不會執行 JavaScript。因此，可能會導致動態產生的內容無法被正確索引，影響網站在搜尋引擎上的表現。

Nuxt.js 是基於 Vue.js 的框架，預設使用通用渲染模式（Universal Rendering），結合了伺服器端渲染（SSR，Server-Side Rendering）和客戶端渲染（CSR，Client-Side Rendering）的優點。透過在伺服器端生成完整的 HTML 內容並回傳給瀏覽器，讓搜尋引擎爬蟲可以取得較完整的 HTML 內容，以改善 SPA 架構下 SEO 成效不佳的問題。

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

Pages 資料夾用來新增頁面，當我們在 Pages 資料夾建立檔案，Nuxt 會根據資料夾以及檔案結構自動生成基於 Vue Router 的路由，讓我們能更有效率的開發和管理

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

nuxt-swiper 版本：v1.2.0

網站開發常使用到輪播功能，Swiper 是一款基於 Javascript 開發、功能完整、實用性高的輪播套件，接下來說明在 Nuxt3 專案搭配 nuxt-swiper 實作

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

前一篇 說明了在 Nuxt3 搭配 Pinia 狀態管理工具全域共享狀態，本篇將介紹 pinia-plugin-persistedstate 套件，用來將 Store 狀態儲存於瀏覽器中，避免狀態被還原

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

專案開發過程中常會有狀態共享的需求。父子元件間資料傳遞可以使用 Props 和 $emit，或是 Provide 和 Inject（參考文章），先前在 Nuxt2 介紹了 VueX 管理工具搭配 vuex-persistedstate 保存狀態（參考文章），接下來說明如何在 Nuxt3 利用更便利高效的方式管理共享狀態。

狀態管理預計分為以下三篇說明，本篇將介紹 Pinia：

1. useState：Nuxt Composable 連結
2. Pinia：Vue.js 狀態管理工具
3. pinia-plugin-persistedstate：維持 Store 狀態 連結

閱讀更多