Nuxt3

Nuxt3 ｜ 2023-09-05

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

Middleware 為 Nuxt 內的 路由守衛（Navigation Guards），相當於 Vue Router 內的 beforeEach callback，協助我們在進到頁面前進行事件處理（例如權限檢查）

Middleware 觸發時機：

  • 頁面初始化：Server Side 跟 Client Side 同時觸發（觸發兩次）
  • 頁面切換：Client Side 觸發

Middleware 定義方式：

  • 具名：在 middleware/ 定義，並在需要的頁面引入
  • 全域：同具名的定義方式，不過檔名需加上 .global 後綴，在所有頁面切換時自動執行
  • 匿名：直接在單一元件檔內定義

閱讀更多

Nuxt3 ｜ 2023-09-04

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

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

建立 API

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

閱讀更多

Nuxt3 ｜ 2023-09-01

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

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

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

閱讀更多

Nuxt3 ｜ 2023-08-25

本篇文章同步發表於 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 進行說明。

閱讀更多

Nuxt3 ｜ 2023-08-22 ｜ 2024-12-09
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 成效不佳的問題。

閱讀更多

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×