本篇文章同步發表於 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>，在路徑切換時顯示。也可以自訂共用元件來調整觸發時機或樣式。

閱讀更多

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

提到 Nuxt.js，必須先從 Vue.js 說起，Vue.js 為專注在視圖層（View）的 Javascript 框架，為 SPA（Single Page Application）單頁應用程式，搜尋引擎爬蟲未能抓取到渲染後的 HTML 內容，因此 SEO（Search Engine Optimization）表現趨近於零。

而 Nuxt.js 是基於 Vue.js 的框架，為通用渲染模式（Universal Rendering），結合了 SSR（Server Side Render）及 CSR（Client Side Render），搜尋引擎爬蟲可以取得 HTML 內容，大幅提升 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 狀態 連結

閱讀更多

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

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

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

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

閱讀更多