本篇文章同步發表於 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 狀態 連結
本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案
CKEditor 版本：v39.0.0
Nuxt2 搭配 CKEditor 5 請參考 這篇文章
CKEditor 是一套歷史悠久且功能完整、輕量的富文本編輯器（rich text editor），為使用者提供所見即所得（WYSIWYG）的編輯區域。與舊版不同，CKEditor 5 使用 MVC 架構、ES6 編寫、UI 簡潔，且因應現在的前後端分離趨勢，與前端框架 React、Angular、and Vue.js 做整合，讓我們可以更便利的開發應用。
本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案
Stylelint 是一套用於規範 CSS 和 CSS 預處理器（SCSS、Less 等）程式碼的工具，幫助我們維持程式碼的品質和風格。Stylelint 進行檢查時，會根據指定的規則來發現潛在的錯誤、不一致的風格和不推薦的模式。
以 *.vue 檔為例，檔案內包含三種主要的程式碼：<template>、<script> 和 <style>：
<template>：Vue.js 模板語法，用以定義 HTML，例如插槽 {{ }}、條件判斷和迴圈等。雖然這不是嚴格的 JavaScript 語法，但 ESLint 也提供了相關規則對模板語法進行檢查<script>：JavaScript 區塊，由 ESLint 進行程式碼檢查<style>：CSS 區塊，用於定義元件樣式，由 Stylelint 進行程式碼檢查ESLint 搭配 Stylelint，讓專案保持良好的 Coding Style。本篇將說明如何在 Nuxt3 專案搭配 Stylelint 工具。
ESLint JavaScript 程式碼檢查工具參考 這篇文章
本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案
Nuxt3 搭配 Unhead 套件，讓我們可以在應用程式中動態控制 <head> 標籤，定義 meta 資訊、樣式表、程式碼片段等在網頁中需要的內容，有助於 SEO 搜尋引擎優化
本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案
Nuxt2 vee-validate 請參考 這篇文章
vee-validate 是使用於 Vue.js 的輕量表單驗證套件，僅需在表單上加入簡易語法就能進行驗證
Vue.js v3.x 需搭配 vee-validate v4.x
本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案
先前在 Nuxt2 介紹如何使用 axios 取得 API 資料（文章連結）
Nuxt3 提供了全域可使用的內建函式庫 $fetch 以及 composables useFetch、useAsyncData，不需要在另外安裝套件，三個方法依據時機搭配使用，可以確保整體兼容性與快取效能，且能避免重複請求的問題
Nuxt2 的
asyncData以及fetch方法，在 Nuxt3 調整為useAsyncData與useFetch
本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案
定義在 composables 以及 utils 資料夾的檔案 Nuxt 都會自動引入（auto-imports），兩者都是用來定義複用邏輯的函式，不過使用情境有點不同，接下來分別說明。
composables/：mixins/ 的功能。我們可以將不同的邏輯抽象成單獨的 composable，並組合在 setup 函式中utils/：狀態邏輯說明：
- 無狀態邏輯函式：
例如計算兩個數字相加的函式。當輸入值後，經過函式運算返回值，不會受其他狀態影響。無論何時輸入相同的值，都可以得到相同結果，大部分封裝共用方法屬於此類- 有狀態邏輯函式：
例如計數器函式，函式會控制變數。觸發函式時，狀態就會改變，每次觸發的結果不會相同
本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案
Plugins 目錄協助我們在 Nuxt 擴充套件功能。前端開發常會搭配 第三方套件（package）使用，如表單驗證、圖片輪播、提示訊息等，這些套件通常已經被開發者設計好並經過測試，可以直接安裝使用，節省專案開發時間。
本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案
Nuxt3 定義了完整的目錄規則，讓我們可以輕鬆配置功能，專注在開發上
透過 npx nuxi@latest init <project-name> 安裝專案後，可以看到如下的預設目錄
看起來分類似乎有點不齊全，接下來跟著官方文件一起建立完整的專案目錄
本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案
Nuxt 3 完整支援 TypeScript 開發，TypeScript 相關設定在專案根目錄 tsconfig.json，本篇將說明：
Update your browser to view this website correctly. Update my browser now