[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"header-categories":3,"post-state-management-vue3-pinia-patterns":73,"parsed-post-caa4533e-4c7a-4351-aa8e-57931a330741":142},{"success":4,"data":5},true,{"items":6,"pagination":70},[7,16,24,32,40,48,56,63],{"id":8,"name":9,"description":10,"parentId":11,"createdAt":12,"updatedAt":12,"parent":11,"children":13,"_count":14},"ai-future","AI & The Future","Artificial intelligence and emerging technology",null,"2026-07-24T06:02:45.990Z",[],{"posts":15},1,{"id":17,"name":18,"description":19,"parentId":11,"createdAt":20,"updatedAt":20,"parent":11,"children":21,"_count":22},"tools-productivity","Tools & Productivity","Developer tools and workflow optimization","2026-07-24T06:02:45.712Z",[],{"posts":23},7,{"id":25,"name":26,"description":27,"parentId":11,"createdAt":28,"updatedAt":28,"parent":11,"children":29,"_count":30},"career","Career & Growth","Professional development for developers","2026-07-24T06:02:45.486Z",[],{"posts":31},3,{"id":33,"name":34,"description":35,"parentId":11,"createdAt":36,"updatedAt":36,"parent":11,"children":37,"_count":38},"opinion","Opinion & Analysis","Industry analysis and technical opinions","2026-07-24T06:02:45.272Z",[],{"posts":39},6,{"id":41,"name":42,"description":43,"parentId":11,"createdAt":44,"updatedAt":44,"parent":11,"children":45,"_count":46},"tutorials","Tutorials","Step-by-step learning guides","2026-07-24T06:02:44.965Z",[],{"posts":47},21,{"id":49,"name":50,"description":51,"parentId":11,"createdAt":52,"updatedAt":52,"parent":11,"children":53,"_count":54},"software-engineering","Software Engineering","Best practices, patterns, and principles","2026-07-24T06:02:44.689Z",[],{"posts":55},24,{"id":57,"name":58,"description":59,"parentId":11,"createdAt":60,"updatedAt":60,"parent":11,"children":61,"_count":62},"devops-cloud","DevOps & Cloud","Infrastructure, deployment, and cloud computing","2026-07-24T06:02:44.453Z",[],{"posts":39},{"id":64,"name":65,"description":66,"parentId":11,"createdAt":67,"updatedAt":67,"parent":11,"children":68,"_count":69},"web-development","Web Development","Frontend and backend web development tutorials and guides","2026-07-24T06:02:44.169Z",[],{"posts":55},{"page":15,"limit":71,"total":71,"totalPages":15,"hasNext":72,"hasPrev":72},8,false,{"success":4,"data":74},{"id":75,"slug":76,"title":77,"excerpt":78,"content":79,"status":80,"visibility":81,"featuredImage":82,"canonicalUrl":11,"readingTime":83,"viewCount":84,"commentEnabled":4,"publishedAt":85,"scheduledAt":11,"createdAt":86,"updatedAt":87,"seoTitle":88,"seoDescription":78,"seoKeywords":11,"authorId":89,"author":90,"coAuthors":95,"tags":96,"categories":107,"comments":110,"_count":111,"relatedPosts":113},"caa4533e-4c7a-4351-aa8e-57931a330741","state-management-vue3-pinia-patterns","State Management in Vue 3: Pinia Patterns and Pitfalls","Master Pinia with real-world patterns: store composition, async actions, optimistic updates, and when you don't need a store at all.","## When Do You Need a Store?\n\nNot every piece of state belongs in Pinia. Use stores for:\n\n- State shared across multiple components\n- State that persists across route changes\n- Complex state with derived computations\n\nFor local component state, `ref()` is enough.\n\n## Setup Store Pattern\n\n```typescript\n\u002F\u002F stores\u002Fposts.ts\nexport const usePostsStore = defineStore('posts', () => {\n  const posts = ref\u003CPost[]>([])\n  const loading = ref(false)\n  const error = ref\u003Cstring | null>(null)\n\n  const publishedPosts = computed(() =>\n    posts.value.filter(p => p.status === 'published')\n  )\n\n  async function fetchPosts() {\n    loading.value = true\n    error.value = null\n    try {\n      const { data } = await $fetch('\u002Fapi\u002Fposts')\n      posts.value = data\n    } catch (e) {\n      error.value = (e as Error).message\n    } finally {\n      loading.value = false\n    }\n  }\n\n  async function deletePost(id: string) {\n    \u002F\u002F Optimistic update\n    const previousPosts = [...posts.value]\n    posts.value = posts.value.filter(p => p.id !== id)\n\n    try {\n      await $fetch(`\u002Fapi\u002Fposts\u002F${id}`, { method: 'DELETE' })\n    } catch (e) {\n      \u002F\u002F Rollback on failure\n      posts.value = previousPosts\n      throw e\n    }\n  }\n\n  return { posts, loading, error, publishedPosts, fetchPosts, deletePost }\n})\n```\n\n## Store Composition\n\nStores can use other stores:\n\n```typescript\nexport const useDashboardStore = defineStore('dashboard', () => {\n  const postsStore = usePostsStore()\n  const authStore = useAuthStore()\n\n  const myPosts = computed(() =>\n    postsStore.posts.filter(p => p.authorId === authStore.user?.id)\n  )\n\n  return { myPosts }\n})\n```\n\n::callout{icon=\"i-lucide-alert-triangle\" color=\"warning\"}\nAvoid circular store dependencies. If Store A imports Store B and Store B imports Store A, refactor the shared logic into a third store or composable.\n::\n\n## Hydration in SSR (Nuxt)\n\nPinia handles SSR hydration automatically in Nuxt. But watch out for:\n\n```typescript\n\u002F\u002F ❌ This runs on every request in SSR — shared state between users!\nconst globalState = ref([])\n\n\u002F\u002F ✅ State inside defineStore is per-request in SSR\nexport const useStore = defineStore('safe', () => {\n  const state = ref([]) \u002F\u002F Fresh per request\n  return { state }\n})\n```\n\n## When NOT to Use Pinia\n\n- **Server state** → Use `useFetch` \u002F `useAsyncData` with caching\n- **Form state** → Keep it local with `reactive()`\n- **URL state** → Use route query params\n- **UI state** → Local refs in the component\n\nPinia is powerful, but the simplest solution that works is always the right one.\n","published","public","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1498050108023-c5249f4df085?w=1200&q=80",9,604,"2026-06-23T06:03:23.704Z","2026-07-24T06:03:23.707Z","2026-07-28T17:18:39.919Z","State Management in Vue 3: Pinia Patterns and Pitfalls | BitBlog","fddb5d93-7a2c-4d86-a06a-fa32e73a01c6",{"email":91,"bio":92,"id":89,"name":93,"avatarUrl":94},"mbeahessilfieprince@gmail.com","Fullstack Software Developer ","Mbeah Essilfie","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F93322394?v=4",[],[97,102],{"id":98,"name":99,"color":100,"description":101},"typescript","TypeScript","#3178c6","Typed superset of JavaScript",{"id":103,"name":104,"color":105,"description":106},"vue","Vue","#4fc08d","The Progressive JavaScript Framework",[108,109],{"id":64,"name":65,"description":66},{"id":41,"name":42,"description":43},[],{"comments":112},0,[114,122,132],{"id":115,"slug":116,"title":117,"excerpt":118,"featuredImage":82,"viewCount":119,"readingTime":71,"publishedAt":120,"author":121},"2997028f-4d22-4eb7-9d86-894a54cb559a","building-type-safe-apis-nuxt3-prisma","Building Type-Safe APIs with Nuxt 3 and Prisma","Learn how to build end-to-end type-safe APIs using Nuxt 3 server routes and Prisma ORM for a seamless developer experience.",1922,"2026-07-23T06:02:46.910Z",{"id":89,"name":93,"avatarUrl":94},{"id":123,"slug":124,"title":125,"excerpt":126,"featuredImage":127,"viewCount":128,"readingTime":129,"publishedAt":130,"author":131},"da9e4553-8b0d-411e-b4ec-f9684017e163","mastering-tailwind-css-design-systems","Mastering Tailwind CSS: From Utility Classes to Design Systems","Go beyond basic utility classes and learn how to build cohesive, maintainable design systems with Tailwind CSS.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1555066931-4365d14bab8c?w=1200&q=80",257,10,"2026-07-21T06:02:49.268Z",{"id":89,"name":93,"avatarUrl":94},{"id":133,"slug":134,"title":135,"excerpt":136,"featuredImage":137,"viewCount":138,"readingTime":139,"publishedAt":140,"author":141},"50add5fc-4026-4267-b917-7f71ea9e35b0","complete-guide-vue3-composables","The Complete Guide to Vue 3 Composables","Understand the power of Vue 3's Composition API through practical, real-world composable patterns that you can use today.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1517694712202-14dd9538aa97?w=1200&q=80",990,12,"2026-07-19T06:02:51.753Z",{"id":89,"name":93,"avatarUrl":94},{"data":143,"body":145,"toc":345},{"title":144,"description":144},"",{"type":146,"children":147},"root",[148,157,163,183,197,203,214,220,225,233,244,250,255,263,269,335,340],{"type":149,"tag":150,"props":151,"children":153},"element","h2",{"id":152},"when-do-you-need-a-store",[154],{"type":155,"value":156},"text","When Do You Need a Store?",{"type":149,"tag":158,"props":159,"children":160},"p",{},[161],{"type":155,"value":162},"Not every piece of state belongs in Pinia. Use stores for:",{"type":149,"tag":164,"props":165,"children":166},"ul",{},[167,173,178],{"type":149,"tag":168,"props":169,"children":170},"li",{},[171],{"type":155,"value":172},"State shared across multiple components",{"type":149,"tag":168,"props":174,"children":175},{},[176],{"type":155,"value":177},"State that persists across route changes",{"type":149,"tag":168,"props":179,"children":180},{},[181],{"type":155,"value":182},"Complex state with derived computations",{"type":149,"tag":158,"props":184,"children":185},{},[186,188,195],{"type":155,"value":187},"For local component state, ",{"type":149,"tag":189,"props":190,"children":192},"code",{"className":191},[],[193],{"type":155,"value":194},"ref()",{"type":155,"value":196}," is enough.",{"type":149,"tag":150,"props":198,"children":200},{"id":199},"setup-store-pattern",[201],{"type":155,"value":202},"Setup Store Pattern",{"type":149,"tag":204,"props":205,"children":209},"pre",{"className":206,"code":207,"language":98,"meta":144,"style":208},"language-typescript","\u002F\u002F stores\u002Fposts.ts\nexport const usePostsStore = defineStore('posts', () => {\n  const posts = ref\u003CPost[]>([])\n  const loading = ref(false)\n  const error = ref\u003Cstring | null>(null)\n\n  const publishedPosts = computed(() =>\n    posts.value.filter(p => p.status === 'published')\n  )\n\n  async function fetchPosts() {\n    loading.value = true\n    error.value = null\n    try {\n      const { data } = await $fetch('\u002Fapi\u002Fposts')\n      posts.value = data\n    } catch (e) {\n      error.value = (e as Error).message\n    } finally {\n      loading.value = false\n    }\n  }\n\n  async function deletePost(id: string) {\n    \u002F\u002F Optimistic update\n    const previousPosts = [...posts.value]\n    posts.value = posts.value.filter(p => p.id !== id)\n\n    try {\n      await $fetch(`\u002Fapi\u002Fposts\u002F${id}`, { method: 'DELETE' })\n    } catch (e) {\n      \u002F\u002F Rollback on failure\n      posts.value = previousPosts\n      throw e\n    }\n  }\n\n  return { posts, loading, error, publishedPosts, fetchPosts, deletePost }\n})\n","undefined",[210],{"type":149,"tag":189,"props":211,"children":212},{"__ignoreMap":144},[213],{"type":155,"value":207},{"type":149,"tag":150,"props":215,"children":217},{"id":216},"store-composition",[218],{"type":155,"value":219},"Store Composition",{"type":149,"tag":158,"props":221,"children":222},{},[223],{"type":155,"value":224},"Stores can use other stores:",{"type":149,"tag":204,"props":226,"children":228},{"className":206,"code":227,"language":98,"meta":144,"style":208},"export const useDashboardStore = defineStore('dashboard', () => {\n  const postsStore = usePostsStore()\n  const authStore = useAuthStore()\n\n  const myPosts = computed(() =>\n    postsStore.posts.filter(p => p.authorId === authStore.user?.id)\n  )\n\n  return { myPosts }\n})\n",[229],{"type":149,"tag":189,"props":230,"children":231},{"__ignoreMap":144},[232],{"type":155,"value":227},{"type":149,"tag":234,"props":235,"children":238},"callout",{"color":236,"icon":237},"warning","i-lucide-alert-triangle",[239],{"type":149,"tag":158,"props":240,"children":241},{},[242],{"type":155,"value":243},"Avoid circular store dependencies. If Store A imports Store B and Store B imports Store A, refactor the shared logic into a third store or composable.",{"type":149,"tag":150,"props":245,"children":247},{"id":246},"hydration-in-ssr-nuxt",[248],{"type":155,"value":249},"Hydration in SSR (Nuxt)",{"type":149,"tag":158,"props":251,"children":252},{},[253],{"type":155,"value":254},"Pinia handles SSR hydration automatically in Nuxt. But watch out for:",{"type":149,"tag":204,"props":256,"children":258},{"className":206,"code":257,"language":98,"meta":144,"style":208},"\u002F\u002F ❌ This runs on every request in SSR — shared state between users!\nconst globalState = ref([])\n\n\u002F\u002F ✅ State inside defineStore is per-request in SSR\nexport const useStore = defineStore('safe', () => {\n  const state = ref([]) \u002F\u002F Fresh per request\n  return { state }\n})\n",[259],{"type":149,"tag":189,"props":260,"children":261},{"__ignoreMap":144},[262],{"type":155,"value":257},{"type":149,"tag":150,"props":264,"children":266},{"id":265},"when-not-to-use-pinia",[267],{"type":155,"value":268},"When NOT to Use Pinia",{"type":149,"tag":164,"props":270,"children":271},{},[272,299,315,325],{"type":149,"tag":168,"props":273,"children":274},{},[275,281,283,289,291,297],{"type":149,"tag":276,"props":277,"children":278},"strong",{},[279],{"type":155,"value":280},"Server state",{"type":155,"value":282}," → Use ",{"type":149,"tag":189,"props":284,"children":286},{"className":285},[],[287],{"type":155,"value":288},"useFetch",{"type":155,"value":290}," \u002F ",{"type":149,"tag":189,"props":292,"children":294},{"className":293},[],[295],{"type":155,"value":296},"useAsyncData",{"type":155,"value":298}," with caching",{"type":149,"tag":168,"props":300,"children":301},{},[302,307,309],{"type":149,"tag":276,"props":303,"children":304},{},[305],{"type":155,"value":306},"Form state",{"type":155,"value":308}," → Keep it local with ",{"type":149,"tag":189,"props":310,"children":312},{"className":311},[],[313],{"type":155,"value":314},"reactive()",{"type":149,"tag":168,"props":316,"children":317},{},[318,323],{"type":149,"tag":276,"props":319,"children":320},{},[321],{"type":155,"value":322},"URL state",{"type":155,"value":324}," → Use route query params",{"type":149,"tag":168,"props":326,"children":327},{},[328,333],{"type":149,"tag":276,"props":329,"children":330},{},[331],{"type":155,"value":332},"UI state",{"type":155,"value":334}," → Local refs in the component",{"type":149,"tag":158,"props":336,"children":337},{},[338],{"type":155,"value":339},"Pinia is powerful, but the simplest solution that works is always the right one.",{"type":149,"tag":341,"props":342,"children":343},"style",{},[344],{"type":155,"value":144},{"title":144,"searchDepth":346,"depth":346,"links":347},2,[348,349,350,351,352],{"id":152,"depth":346,"text":156},{"id":199,"depth":346,"text":202},{"id":216,"depth":346,"text":219},{"id":246,"depth":346,"text":249},{"id":265,"depth":346,"text":268}]