[{"data":1,"prerenderedAt":247},["ShallowReactive",2],{"catalog:vuejs":3},[4,14,24,36,45,52,59,66,71,76,81,87,92,97,102,107,116,122,129,135,142,149,157,162,170,175,181,188,194,201,207,213,220,225,231,236,241],{"path":5,"title":6,"description":7,"date":8,"category":9,"tags":10},"\u002Fblog\u002Fnuxt\u002Fuse-nuxt-app-payload-error","用 useNuxtApp().payload.error 在 SPA 模式除錯 API 500","在 ssr: false 的 Nuxt 專案裡，API 回傳 500 時 console 一片安靜，卻能透過 useNuxtApp().payload.error 看到完整錯誤內容。本文記錄這個現象的成因，以及純 Vue 專案如何復刻同樣的除錯體驗。","2026-04-18","Nuxt",[9,11,12,13],"Vue","Debug","Error Handling",{"path":15,"title":16,"description":17,"date":18,"category":9,"tags":19},"\u002Fblog\u002Fnuxt\u002Fsupabase-self-hosted","Self-hosted Supabase 部署與遷移","從 Supabase Cloud 遷移到 Self-hosted，涵蓋 Docker 部署、Cloudflare Tunnel 配置、Migration 手動執行與日常維護。","2026-01-25",[9,20,21,22,23],"Supabase","PostgreSQL","Docker","Self-hosted",{"path":25,"title":26,"description":27,"date":28,"category":29,"tags":30},"\u002Fblog\u002Fnodejs\u002Foxlint","Oxlint + Oxfmt - 用 Rust 加速你的程式碼檢查與格式化","使用 Oxlint 和 Oxfmt 取代 ESLint 和 Prettier，享受 50-100 倍的速度提升，同時保持程式碼品質。","2026-01-23","Node.js",[31,32,29,33,34,35],"Oxlint","Oxfmt","Linter","Formatter","Rust",{"path":37,"title":38,"description":39,"date":40,"category":9,"tags":41},"\u002Fblog\u002Fnuxt\u002Fai-assisted-claude-md","AI 輔助開發與 CLAUDE.md","設計 CLAUDE.md 專案規範，建立 AI Skills 系統與自動化開發流程，提升與 AI 協作的效率。","2026-01-22",[9,42,43,44],"TDD","Vitest","AI",{"path":46,"title":47,"description":48,"date":40,"category":9,"tags":49},"\u002Fblog\u002Fnuxt\u002Fbetter-auth-integration","nuxt-better-auth 認證整合","使用 @onmax\u002Fnuxt-better-auth 實現完整的認證系統，包含 OAuth 社交登入、Session 管理與權限檢查。",[9,50,51],"Authentication","OAuth",{"path":53,"title":54,"description":55,"date":40,"category":9,"tags":56},"\u002Fblog\u002Fnuxt\u002Ffullstack-architecture","Nuxt 4 全棧專案架構設計","從技術選型到目錄結構，打造可維護的 Nuxt 4 + Supabase + Cloudflare Workers 全棧應用。",[9,57,58],"TypeScript","Architecture",{"path":60,"title":61,"description":62,"date":40,"category":9,"tags":63},"\u002Fblog\u002Fnuxt\u002Fnitro-api-design","Nitro Server API 設計模式","使用 Nitro 建構 RESTful API，涵蓋目錄結構、Zod 驗證、統一回應格式與錯誤處理。",[9,64,65],"Nitro","Pinia",{"path":67,"title":68,"description":69,"date":40,"category":9,"tags":70},"\u002Fblog\u002Fnuxt\u002Fnuxt-ui-dashboard","Nuxt UI 4 Dashboard 實戰","使用 Nuxt UI 4 打造專業級 Dashboard 介面，涵蓋側邊欄、導航、響應式設計與主題配置的實作經驗。",[9,57,58],{"path":72,"title":73,"description":74,"date":40,"category":9,"tags":75},"\u002Fblog\u002Fnuxt\u002Fpinia-colada-async-state","Pinia Colada 非同步狀態管理","使用 Pinia Colada 管理非同步狀態，實作 useQuery 查詢、useMutation 變更與快取策略。",[9,64,65],{"path":77,"title":78,"description":79,"date":40,"category":9,"tags":80},"\u002Fblog\u002Fnuxt\u002Frole-based-access-control","角色權限系統設計","實作 RBAC 角色權限控制，涵蓋 Client 端路由守衛、Server 端權限檢查、與 nuxt.config 的 routeRules 設定。",[9,50,51],{"path":82,"title":83,"description":84,"date":40,"category":9,"tags":85},"\u002Fblog\u002Fnuxt\u002Fsupabase-function-security","Database Function 安全規範","撰寫安全的 Supabase Database Function，涵蓋 search_path、SECURITY DEFINER、與 supabase db lint 檢查。",[9,20,21,86],"RLS",{"path":88,"title":89,"description":90,"date":40,"category":9,"tags":91},"\u002Fblog\u002Fnuxt\u002Fsupabase-local-first","Supabase Local-First 開發流程","建立安全可靠的 Supabase Migration 工作流程，從本地開發到遠端同步的完整指南。",[9,20,21],{"path":93,"title":94,"description":95,"date":40,"category":9,"tags":96},"\u002Fblog\u002Fnuxt\u002Fsupabase-rls-strategy","RLS 與「讀 Client，寫 Server」策略","設計安全的 Supabase RLS 政策，實作 Client 端唯讀、Server 端寫入的資料存取策略。",[9,20,21,86],{"path":98,"title":99,"description":100,"date":40,"category":9,"tags":101},"\u002Fblog\u002Fnuxt\u002Ftdd-testing-workflow","TDD 與自動化測試","在 Nuxt 4 專案中實踐 TDD 開發流程，涵蓋 Vitest 設定、單元測試與 Nuxt 環境測試。",[9,42,43],{"path":103,"title":104,"description":105,"date":40,"category":9,"tags":106},"\u002Fblog\u002Fnuxt\u002Ftypescript-type-safety","TypeScript 類型安全實戰","在 Nuxt 4 專案中實現端到端類型安全，從 Supabase 自動產生類型到 Vue 元件的嚴格類型定義。",[9,57,58],{"path":108,"title":109,"description":110,"date":111,"category":29,"tags":112},"\u002Fblog\u002Fnodejs\u002Feslint","ESLint - 讓你提前修復潛在錯誤，並維持一致的程式碼風格","這篇文章帶你快速配置新版 ESLint 9.x 的扁平化設定檔，包含格式化與自定義檢測規範。","2025-06-05",[113,29,114,9,115,57],"ESLint","Vue.js","JavaScript",{"path":117,"title":118,"description":119,"date":120,"category":9,"tags":121},"\u002Fblog\u002Fnuxt\u002Fnuxt-import-static-file","Nuxt 引入使用靜態資源的方式","透過 Nitro 輕鬆將 json 檔、圖片、影片等靜態資源導入 Nuxt 專案，並了解 public assets 與 server assets 的差異與使用方式。","2025-06-04",[9,64],{"path":123,"title":124,"description":125,"date":120,"category":9,"tags":126},"\u002Fblog\u002Fnuxt\u002Fnuxt-server-engine-nitro-h3","簡介 Nuxt 中的伺服器引擎：Nitro 與 H3","快速了解 Nuxt 3 中的 Nitro 與 H3，如何讓後端開發更簡單高效，並支援多平台部署。",[9,64,127,128],"H3","UnJS",{"path":130,"title":131,"description":132,"date":133,"category":9,"tags":134},"\u002Fblog\u002Fnuxt\u002Fglobal-type","在 Nuxt 專案中優雅處理 null 與 undefined","透過 Maybe\u003CT> 全域型別定義，在 Nuxt 專案中優雅地處理可能為 null 或 undefined 的值，提升型別安全和開發體驗。","2025-06-03",[9,57],{"path":136,"title":137,"description":138,"date":139,"category":140,"tags":141},"\u002Fblog\u002Fgit\u002Fhusky-and-commitlint","自動檢查 Git commit 與 branch 名稱的格式","使用 husky 與 commitlint 來自動檢查 commit 訊息跟 branch 名稱的格式","2025-01-22","Git",[140],{"path":143,"title":144,"description":145,"date":146,"category":29,"tags":147},"\u002Fblog\u002Fnodejs\u002Fpackage-manager","認識 Node.js 的 Package Manager","使用 JS 開發專案時，我們經常需要安裝第三方套件來擴充功能，使用 Package Manager 可以讓我們更方便的管理套件版本並確保相容性。","2024-10-15",[29,148],"pnpm",{"path":150,"title":151,"description":152,"date":153,"category":29,"tags":154},"\u002Fblog\u002Fnodejs\u002Fvite","Vite - 稱霸網頁前端開發的開發工具","Vite 是一個由 Vue.js 團隊開發的網頁前端開發工具，用於開發與打包網頁前端專案。","2024-10-13",[29,155,156],"Vite","Frontend",{"path":158,"title":159,"description":160,"date":153,"category":114,"tags":161},"\u002Fblog\u002Fvue\u002Fcreate-project","以 Vite 創建一個 Vue.js 專案","本篇將介紹如何使用 Vite 快速建立一個 Vue.js 專案，從安裝、啟動及基本設置的操作步驟。",[114,156,155],{"path":163,"title":164,"description":165,"date":166,"category":167,"tags":168},"\u002Fblog\u002Flinux\u002Fubuntu\u002Fsourcelist","Ubuntu 修改 sources.list","將 Ubuntu 的 apt 來源更換為台灣國網中心，提升 package 的下載速度。","2024-10-05","Linux",[167,169],"Ubuntu",{"path":171,"title":172,"description":173,"date":166,"category":167,"tags":174},"\u002Fblog\u002Flinux\u002Fubuntu\u002Fsudo-no-password","Ubuntu 讓 sudo 時不用輸入密碼","透過修改 sudoers 檔案，讓特定使用者在執行 sudo 時不用輸入密碼。",[167,169],{"path":176,"title":177,"description":178,"date":166,"category":167,"tags":179},"\u002Fblog\u002Flinux\u002Fwsl","安裝 WSL 教學","透過 Windows Subsystem for Linux (WSL) 在 Windows 上安裝 Ubuntu 來使用 Linux 環境。",[167,169,180],"WSL",{"path":182,"title":183,"description":184,"date":166,"category":29,"tags":185},"\u002Fblog\u002Fnodejs\u002Fnvm","用 NVM 管理 Node.js 版本","認識 Node.js，在 Linux \u002F Windows \u002F Mac 任何作業系統安裝 NVM 來管理 Node.js 版本。",[29,156,167,169,186,187],"Windows","MacOS",{"path":189,"title":190,"description":191,"date":192,"category":114,"tags":193},"\u002Fblog\u002Fvue\u002Fintro","認識 Vue.js","Vue.js，一個平易近人、高效能且功能完整的漸進式 JavaScript 框架。","2024-09-25",[11,156],{"path":195,"title":196,"description":197,"date":198,"category":199,"tags":200},"\u002Fblog\u002Fcss\u002Fnote","CSS 筆記","CSS 基礎屬性與樣式","2024-09-13","CSS",[156,199],{"path":202,"title":203,"description":204,"date":198,"category":205,"tags":206},"\u002Fblog\u002Fhtml\u002Fnote","HTML 筆記","HTML 基礎語法與常用標籤","HTML",[156,205],{"path":208,"title":209,"description":210,"date":211,"category":167,"tags":212},"\u002Fblog\u002Flinux\u002Fubuntu\u002Fnote","Ubuntu 筆記","Ubuntu 操作入門筆記","2024-09-11",[167,169],{"path":214,"title":215,"description":216,"date":217,"category":140,"tags":218},"\u002Fblog\u002Fgit\u002Fnote","Git 筆記","編輯拆分中","2024-09-10",[140,219],"VS Code",{"path":221,"title":222,"description":223,"date":217,"category":219,"tags":224},"\u002Fblog\u002Fvscode\u002Fnote","VS Code 筆記","快捷鍵與前端開發常用 Extension 推薦",[219],{"path":226,"title":227,"description":228,"date":229,"category":114,"tags":230},"\u002Fblog\u002Fvue\u002Fv-bind","v-bind 屬性綁定指令","透過 v-bind 屬性綁定，讓元素可以動態更新屬性","2024-09-09",[11,156],{"path":232,"title":233,"description":234,"date":229,"category":114,"tags":235},"\u002Fblog\u002Fvue\u002Fv-for","v-for 迴圈指令","透過 v-for 迴圈指令，讓元素可以動態渲染數據。",[11,156],{"path":237,"title":238,"description":239,"date":229,"category":114,"tags":240},"\u002Fblog\u002Fvue\u002Fv-on","v-on 事件綁定指令","透過 v-on 事件綁定，讓元素可以觸發事件",[11,156],{"path":242,"title":243,"description":244,"date":245,"category":219,"tags":246},"\u002Fblog\u002Fvscode\u002Fintro","認識 Visual Studio Code","VS Code 是近年最熱門的程式碼編輯器，本篇將介紹 VS Code 的基本功能及使用方式，並簡介 VS Code 的進階應用。","2024-07-13",[219],1780512501888]