[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"header-categories":3,"post-building-type-safe-apis-nuxt3-prisma":73,"parsed-post-2997028f-4d22-4eb7-9d86-894a54cb559a":148},{"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":71,"viewCount":83,"commentEnabled":4,"publishedAt":84,"scheduledAt":11,"createdAt":85,"updatedAt":86,"seoTitle":87,"seoDescription":78,"seoKeywords":11,"authorId":88,"author":89,"coAuthors":94,"tags":95,"categories":111,"comments":114,"_count":115,"relatedPosts":117},"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.","## Why Type Safety Matters\n\nIn modern full-stack development, type safety isn't a luxury — it's a necessity. When your frontend and backend share the same type definitions, entire classes of bugs simply vanish.\n\n::callout{icon=\"i-lucide-lightbulb\" color=\"primary\"}\nType-safe APIs eliminate runtime type errors and give you autocomplete across your entire stack.\n::\n\n## Setting Up Prisma in Nuxt 3\n\nFirst, install the dependencies:\n\n```bash\npnpm add prisma @prisma\u002Fclient\npnpm add -D tsx\n```\n\nDefine your schema:\n\n```prisma\nmodel Post {\n  id        String   @id @default(uuid())\n  title     String\n  content   String\n  slug      String   @unique\n  createdAt DateTime @default(now())\n  author    User     @relation(fields: [authorId], references: [id])\n  authorId  String\n}\n```\n\n## Creating Type-Safe Server Routes\n\nNuxt 3's server routes automatically infer return types. Combined with Prisma's generated types, you get full type safety:\n\n```typescript\n\u002F\u002F server\u002Fapi\u002Fposts\u002Findex.get.ts\nimport prisma from '~\u002Fserver\u002Fdb'\n\nexport default defineEventHandler(async (event) => {\n  const posts = await prisma.post.findMany({\n    include: { author: { select: { name: true, avatarUrl: true } } },\n    orderBy: { createdAt: 'desc' },\n  })\n\n  return { data: posts }\n})\n```\n\nOn the frontend, `useFetch` automatically knows the shape of the response:\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst { data } = await useFetch('\u002Fapi\u002Fposts')\n\u002F\u002F data.value?.data is fully typed as Post[]\n\u003C\u002Fscript>\n```\n\n## Validation with Zod\n\nAdd runtime validation that also provides types:\n\n```typescript\nimport { z } from 'zod'\n\nconst CreatePostSchema = z.object({\n  title: z.string().min(3).max(200),\n  content: z.string().min(10),\n  slug: z.string().regex(\u002F^[a-z0-9-]+$\u002F),\n})\n\ntype CreatePostInput = z.infer\u003Ctypeof CreatePostSchema>\n```\n\n::callout{icon=\"i-lucide-check-circle\" color=\"success\"}\nWith this setup, types flow from your database schema through your API to your components — no manual type definitions needed.\n::\n\n## Key Takeaways\n\n- Prisma generates types from your schema automatically\n- Nuxt 3 server routes provide inferred return types to `useFetch`\n- Zod bridges runtime validation and compile-time types\n- This stack eliminates the \"type gap\" between frontend and backend\n","published","public","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1498050108023-c5249f4df085?w=1200&q=80",1922,"2026-07-23T06:02:46.910Z","2026-07-24T06:02:46.923Z","2026-07-28T13:17:00.516Z","Building Type-Safe APIs with Nuxt 3 and Prisma | BitBlog","fddb5d93-7a2c-4d86-a06a-fa32e73a01c6",{"email":90,"bio":91,"id":88,"name":92,"avatarUrl":93},"mbeahessilfieprince@gmail.com","Fullstack Software Developer ","Mbeah Essilfie","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F93322394?v=4",[],[96,101,106],{"id":97,"name":98,"color":99,"description":100},"typescript","TypeScript","#3178c6","Typed superset of JavaScript",{"id":102,"name":103,"color":104,"description":105},"nuxt","Nuxt","#00dc82","The Intuitive Vue Framework",{"id":107,"name":108,"color":109,"description":110},"prisma","Prisma","#2d3748","Next-generation Node.js ORM",[112,113],{"id":64,"name":65,"description":66},{"id":41,"name":42,"description":43},[],{"comments":116},0,[118,128,138],{"id":119,"slug":120,"title":121,"excerpt":122,"featuredImage":123,"viewCount":124,"readingTime":125,"publishedAt":126,"author":127},"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",256,10,"2026-07-21T06:02:49.268Z",{"id":88,"name":92,"avatarUrl":93},{"id":129,"slug":130,"title":131,"excerpt":132,"featuredImage":133,"viewCount":134,"readingTime":135,"publishedAt":136,"author":137},"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",989,12,"2026-07-19T06:02:51.753Z",{"id":88,"name":92,"avatarUrl":93},{"id":139,"slug":140,"title":141,"excerpt":142,"featuredImage":143,"viewCount":144,"readingTime":145,"publishedAt":146,"author":147},"8570ed3d-b1cf-4288-8578-aed5593f8c58","docker-for-frontend-developers","Docker for Frontend Developers: A Practical Introduction","Stop saying 'it works on my machine.' Learn Docker fundamentals through the lens of frontend development workflows.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1551288049-bebda4e38f71?w=1200&q=80",408,9,"2026-07-17T06:02:53.993Z",{"id":88,"name":92,"avatarUrl":93},{"data":149,"body":151,"toc":331},{"title":150,"description":150},"",{"type":152,"children":153},"root",[154,163,169,180,186,191,204,209,218,224,229,238,251,261,267,272,280,290,296,326],{"type":155,"tag":156,"props":157,"children":159},"element","h2",{"id":158},"why-type-safety-matters",[160],{"type":161,"value":162},"text","Why Type Safety Matters",{"type":155,"tag":164,"props":165,"children":166},"p",{},[167],{"type":161,"value":168},"In modern full-stack development, type safety isn't a luxury — it's a necessity. When your frontend and backend share the same type definitions, entire classes of bugs simply vanish.",{"type":155,"tag":170,"props":171,"children":174},"callout",{"color":172,"icon":173},"primary","i-lucide-lightbulb",[175],{"type":155,"tag":164,"props":176,"children":177},{},[178],{"type":161,"value":179},"Type-safe APIs eliminate runtime type errors and give you autocomplete across your entire stack.",{"type":155,"tag":156,"props":181,"children":183},{"id":182},"setting-up-prisma-in-nuxt-3",[184],{"type":161,"value":185},"Setting Up Prisma in Nuxt 3",{"type":155,"tag":164,"props":187,"children":188},{},[189],{"type":161,"value":190},"First, install the dependencies:",{"type":155,"tag":192,"props":193,"children":198},"pre",{"className":194,"code":195,"language":196,"meta":150,"style":197},"language-bash","pnpm add prisma @prisma\u002Fclient\npnpm add -D tsx\n","bash","undefined",[199],{"type":155,"tag":200,"props":201,"children":202},"code",{"__ignoreMap":150},[203],{"type":161,"value":195},{"type":155,"tag":164,"props":205,"children":206},{},[207],{"type":161,"value":208},"Define your schema:",{"type":155,"tag":192,"props":210,"children":213},{"className":211,"code":212,"language":107,"meta":150,"style":197},"language-prisma","model Post {\n  id        String   @id @default(uuid())\n  title     String\n  content   String\n  slug      String   @unique\n  createdAt DateTime @default(now())\n  author    User     @relation(fields: [authorId], references: [id])\n  authorId  String\n}\n",[214],{"type":155,"tag":200,"props":215,"children":216},{"__ignoreMap":150},[217],{"type":161,"value":212},{"type":155,"tag":156,"props":219,"children":221},{"id":220},"creating-type-safe-server-routes",[222],{"type":161,"value":223},"Creating Type-Safe Server Routes",{"type":155,"tag":164,"props":225,"children":226},{},[227],{"type":161,"value":228},"Nuxt 3's server routes automatically infer return types. Combined with Prisma's generated types, you get full type safety:",{"type":155,"tag":192,"props":230,"children":233},{"className":231,"code":232,"language":97,"meta":150,"style":197},"language-typescript","\u002F\u002F server\u002Fapi\u002Fposts\u002Findex.get.ts\nimport prisma from '~\u002Fserver\u002Fdb'\n\nexport default defineEventHandler(async (event) => {\n  const posts = await prisma.post.findMany({\n    include: { author: { select: { name: true, avatarUrl: true } } },\n    orderBy: { createdAt: 'desc' },\n  })\n\n  return { data: posts }\n})\n",[234],{"type":155,"tag":200,"props":235,"children":236},{"__ignoreMap":150},[237],{"type":161,"value":232},{"type":155,"tag":164,"props":239,"children":240},{},[241,243,249],{"type":161,"value":242},"On the frontend, ",{"type":155,"tag":200,"props":244,"children":246},{"className":245},[],[247],{"type":161,"value":248},"useFetch",{"type":161,"value":250}," automatically knows the shape of the response:",{"type":155,"tag":192,"props":252,"children":256},{"className":253,"code":254,"language":255,"meta":150,"style":197},"language-vue","\u003Cscript setup lang=\"ts\">\nconst { data } = await useFetch('\u002Fapi\u002Fposts')\n\u002F\u002F data.value?.data is fully typed as Post[]\n\u003C\u002Fscript>\n","vue",[257],{"type":155,"tag":200,"props":258,"children":259},{"__ignoreMap":150},[260],{"type":161,"value":254},{"type":155,"tag":156,"props":262,"children":264},{"id":263},"validation-with-zod",[265],{"type":161,"value":266},"Validation with Zod",{"type":155,"tag":164,"props":268,"children":269},{},[270],{"type":161,"value":271},"Add runtime validation that also provides types:",{"type":155,"tag":192,"props":273,"children":275},{"className":231,"code":274,"language":97,"meta":150,"style":197},"import { z } from 'zod'\n\nconst CreatePostSchema = z.object({\n  title: z.string().min(3).max(200),\n  content: z.string().min(10),\n  slug: z.string().regex(\u002F^[a-z0-9-]+$\u002F),\n})\n\ntype CreatePostInput = z.infer\u003Ctypeof CreatePostSchema>\n",[276],{"type":155,"tag":200,"props":277,"children":278},{"__ignoreMap":150},[279],{"type":161,"value":274},{"type":155,"tag":170,"props":281,"children":284},{"color":282,"icon":283},"success","i-lucide-check-circle",[285],{"type":155,"tag":164,"props":286,"children":287},{},[288],{"type":161,"value":289},"With this setup, types flow from your database schema through your API to your components — no manual type definitions needed.",{"type":155,"tag":156,"props":291,"children":293},{"id":292},"key-takeaways",[294],{"type":161,"value":295},"Key Takeaways",{"type":155,"tag":297,"props":298,"children":299},"ul",{},[300,306,316,321],{"type":155,"tag":301,"props":302,"children":303},"li",{},[304],{"type":161,"value":305},"Prisma generates types from your schema automatically",{"type":155,"tag":301,"props":307,"children":308},{},[309,311],{"type":161,"value":310},"Nuxt 3 server routes provide inferred return types to ",{"type":155,"tag":200,"props":312,"children":314},{"className":313},[],[315],{"type":161,"value":248},{"type":155,"tag":301,"props":317,"children":318},{},[319],{"type":161,"value":320},"Zod bridges runtime validation and compile-time types",{"type":155,"tag":301,"props":322,"children":323},{},[324],{"type":161,"value":325},"This stack eliminates the \"type gap\" between frontend and backend",{"type":155,"tag":327,"props":328,"children":329},"style",{},[330],{"type":161,"value":150},{"title":150,"searchDepth":332,"depth":332,"links":333},2,[334,335,336,337,338],{"id":158,"depth":332,"text":162},{"id":182,"depth":332,"text":185},{"id":220,"depth":332,"text":223},{"id":263,"depth":332,"text":266},{"id":292,"depth":332,"text":295}]