[{"data":1,"prerenderedAt":723},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002Ftype-safe-backends-with-typescript-trpc-zod-and-drizzle-orm":142,"\u002Fblog\u002Ftype-safe-backends-with-typescript-trpc-zod-and-drizzle-orm-surround":719},[4],{"title":5,"path":6,"stem":7,"children":8,"page":141},"Blog","\u002Fblog","blog",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137],{"title":10,"path":11,"stem":12},"VueJS Introducing Dynamic Layouts using the Atomic Design Principles","\u002Fblog\u002Fvuejs-introducing-dynamic-layouts-using-the-atomic-design-principles","blog\u002F001.vuejs-introducing-dynamic-layouts-using-the-atomic-design-principles",{"title":14,"path":15,"stem":16},"Understanding JavaScript and Its Quirks","\u002Fblog\u002Funderstanding-javascript-and-its-quirks","blog\u002F002.understanding-javascript-and-its-quirks",{"title":18,"path":19,"stem":20},"Introducing Vue’s latest experimental Vapor Mode","\u002Fblog\u002Fintroducing-vues-latest-experimental-vapor-mode","blog\u002F003.introducing-vues-latest-experimental-vapor-mode",{"title":22,"path":23,"stem":24},"ECMAScript 2024 Nears Finalization","\u002Fblog\u002Fecmascript-2024-nears-finalization","blog\u002F004.ecmascript-2024-nears-finalization",{"title":26,"path":27,"stem":28},"UI Libraries for VueJS: Vuetify, Tailwind, and PrimeVue","\u002Fblog\u002Fui-libraries-for-vuejs-vuetify-tailwind-and-primevue","blog\u002F005.ui-libraries-for-vuejs-vuetify-tailwind-and-primevue",{"title":30,"path":31,"stem":32},"Micro Frontend Architecture","\u002Fblog\u002Fmicro-frontend-architecture","blog\u002F006.micro-frontend-architecture",{"title":34,"path":35,"stem":36},"Pre-rendering and Hydration in Vue.js","\u002Fblog\u002Fpre-rendering-and-hydration-in-vuejs","blog\u002F007.pre-rendering-and-hydration-in-vuejs",{"title":38,"path":39,"stem":40},"Satori by Vercel — Dynamic Image Generation in JavaScript","\u002Fblog\u002Fsatori-by-vercel-dynamic-image-generation-in-javascript","blog\u002F008.satori-by-vercel-dynamic-image-generation-in-javascript",{"title":42,"path":43,"stem":44},"Vue.js and Progressive Web Apps (PWA) – Enhancing Web Experiences","\u002Fblog\u002Fvuejs-and-progressive-web-apps-pwa-enhancing-web-experiences","blog\u002F009.vuejs-and-progressive-web-apps-pwa-enhancing-web-experiences",{"title":46,"path":47,"stem":48},"Moving from a Traditional Node.js CRUD API to Serverless Architecture—A Deep Dive","\u002Fblog\u002Fmoving-from-a-traditional-nodejs-crud-api-to-serverless-architecturea-deep-dive","blog\u002F010.moving-from-a-traditional-nodejs-crud-api-to-serverless-architecturea-deep-dive",{"title":50,"path":51,"stem":52},"Nuxt 3 and Serverless Edge Functions—Unlocking Performance and Scalability","\u002Fblog\u002Fnuxt-3-and-serverless-edge-functionsunlocking-performance-and-scalability","blog\u002F011.nuxt-3-and-serverless-edge-functionsunlocking-performance-and-scalability",{"title":54,"path":55,"stem":56},"A Tribute to Asa Bain: Thank You for Everything","\u002Fblog\u002Fa-tribute-to-asa-bain-thank-you-for-everything","blog\u002F012.a-tribute-to-asa-bain-thank-you-for-everything",{"title":58,"path":59,"stem":60},"Migrating JavaScript to TypeScript in ASP.NET MVC Projects","\u002Fblog\u002Fmigrating-javascript-to-typescript-in-aspnet-mvc-projects","blog\u002F013.migrating-javascript-to-typescript-in-aspnet-mvc-projects",{"title":62,"path":63,"stem":64},"Modernizing Classic ASP.NET MVC with Vue.js","\u002Fblog\u002Fmodernizing-classic-aspnet-mvc-with-vuejs","blog\u002F014.modernizing-classic-aspnet-mvc-with-vuejs",{"title":66,"path":67,"stem":68},"Which UI JavaScript Framework Should You Use?","\u002Fblog\u002Fwhich-ui-javascript-framework-should-you-use","blog\u002F015.which-ui-javascript-framework-should-you-use",{"title":70,"path":71,"stem":72},"Vue + AI Integration Workflows: Enhancing Developer Productivity","\u002Fblog\u002Fvue-ai-integration-workflows-enhancing-developer-productivity","blog\u002F016.vue-ai-integration-workflows-enhancing-developer-productivity",{"title":74,"path":75,"stem":76},"OpenAPI Standards & Scalar Integration for Node.js Apps","\u002Fblog\u002Fopenapi-standards-scalar-integration-for-nodejs-apps","blog\u002F017.openapi-standards-scalar-integration-for-nodejs-apps",{"title":78,"path":79,"stem":80},"Nuxt 3.17 — Data Fetching Improvements","\u002Fblog\u002Fnuxt-317-data-fetching-improvements","blog\u002F019.nuxt-317-data-fetching-improvements",{"title":82,"path":83,"stem":84},"Subdomain-Based Multi-Tenancy in Nuxt","\u002Fblog\u002Fsubdomain-based-multi-tenancy-in-nuxt","blog\u002F020.subdomain-based-multi-tenancy-in-nuxt",{"title":86,"path":87,"stem":88},"Type-Safe Backends with TypeScript: tRPC, Zod, and Drizzle ORM","\u002Fblog\u002Ftype-safe-backends-with-typescript-trpc-zod-and-drizzle-orm","blog\u002F021.type-safe-backends-with-typescript-trpc-zod-and-drizzle-orm",{"title":90,"path":91,"stem":92},"Unit Testing Vue Applications with Vitest and Agentic AI","\u002Fblog\u002Funit-testing-vue-applications-with-vitest-and-agentic-ai","blog\u002F022.unit-testing-vue-applications-with-vitest-and-agentic-ai",{"title":94,"path":95,"stem":96},"Hidden Features & Lesser-Known TypeScript Gems","\u002Fblog\u002Fhidden-features-lesser-known-typescript-gems","blog\u002F023.hidden-features-lesser-known-typescript-gems",{"title":98,"path":99,"stem":100},"Nuxt\u002FVercel Acquisition and Its Impact on NuxtHub Users","\u002Fblog\u002Fnuxtvercel-acquisition-and-its-impact-on-nuxthub-users","blog\u002F024.nuxtvercel-acquisition-and-its-impact-on-nuxthub-users",{"title":102,"path":103,"stem":104},"State of Vue & Nuxt Ecosystem 2025","\u002Fblog\u002Fstate-of-vue-nuxt-ecosystem-2025","blog\u002F025.state-of-vue-nuxt-ecosystem-2025",{"title":106,"path":107,"stem":108},"Feature Adoption in TypeScript Over Time","\u002Fblog\u002Ffeature-adoption-in-typescript-over-time","blog\u002F026.feature-adoption-in-typescript-over-time",{"title":110,"path":111,"stem":112},"Migrating From WordPress to Nuxt Content & Using Nuxt Studio","\u002Fblog\u002Fmigrating-from-wordpress-to-nuxt-content-using-nuxt-studio","blog\u002F027.migrating-from-wordpress-to-nuxt-content-using-nuxt-studio",{"title":114,"path":115,"stem":116},"Strategic Topic: The “Rust-ification” of Tooling (Biome & Rolldown)","\u002Fblog\u002Fstrategic-topic-the-rust-ification-of-tooling-biome-rolldown","blog\u002F028.strategic-topic-the-rust-ification-of-tooling-biome-rolldown",{"title":118,"path":119,"stem":120},"Nuxt 4 and the Evolving Full-Stack Framework Landscape","\u002Fblog\u002Fnuxt-4-and-the-evolving-full-stack-framework-landscape","blog\u002F029.nuxt-4-and-the-evolving-full-stack-framework-landscape",{"title":122,"path":123,"stem":124},"Bun as a JavaScript Runtime: Evaluating Readiness Beyond Node.js","\u002Fblog\u002Fbun-as-a-javascript-runtime-evaluating-readiness-beyond-nodejs","blog\u002F030.bun-as-a-javascript-runtime-evaluating-readiness-beyond-nodejs",{"title":126,"path":127,"stem":128},"Top 10 Nuxt Modules That Supercharge Your App From Day One Introduction","\u002Fblog\u002Ftop-10-nuxt-modules-that-supercharge-your-app-from-day-one-introduction","blog\u002F031.top-10-nuxt-modules-that-supercharge-your-app-from-day-one-introduction",{"title":130,"path":131,"stem":132},"Strategic Topic: Vite+, VoidZero, and the Future of Frontend Tooling","\u002Fblog\u002Fstrategic-topic-vite-voidzero-and-the-future-of-frontend-tooling","blog\u002F032.strategic-topic-vite-voidzero-and-the-future-of-frontend-tooling",{"title":134,"path":135,"stem":136},"The Future of Time in JavaScript: Transitioning to the Native Temporal API","\u002Fblog\u002Fthe-future-of-time-in-javascript-transitioning-to-the-native-temporal-api","blog\u002F033.the-future-of-time-in-javascript-transitioning-to-the-native-temporal-api",{"title":138,"path":139,"stem":140},"Understanding Hydration Issues in Nuxt and How Nuxt Hints Helps","\u002Fblog\u002Funderstanding-hydration-issues-in-nuxt-and-how-nuxt-hints-helps","blog\u002F034.understanding-hydration-issues-in-nuxt-and-how-nuxt-hints-helps",false,{"id":143,"title":86,"author":144,"body":148,"date":712,"description":713,"extension":714,"image":715,"meta":716,"minRead":289,"navigation":354,"path":87,"seo":717,"stem":88,"__hash__":718},"blog\u002Fblog\u002F021.type-safe-backends-with-typescript-trpc-zod-and-drizzle-orm.md",{"name":145,"avatar":146},"Sean Erick C. Ramones",{"src":147,"alt":145},"\u002Favatars\u002Fprofile-image-1.png",{"type":149,"value":150,"toc":700},"minimark",[151,156,169,172,175,179,182,185,187,191,198,201,398,401,403,409,412,514,517,519,525,528,594,597,599,603,631,634,636,640,643,663,666,668,672,679,682,684,688,691,694,696],[152,153,155],"h3",{"id":154},"the-problem-type-mismatch-in-traditional-backends","The Problem: Type Mismatch in Traditional Backends",[157,158,159,160,164,165,168],"p",{},"Traditionally, JavaScript and TypeScript applications have been prone to type mismatches across the stack. Consider an API endpoint that returns ",[161,162,163],"code",{},"{ first_name: string }",", while the frontend expects ",[161,166,167],{},"{ firstName: string }",". This seemingly small difference can cause runtime errors that slip through testing.",[157,170,171],{},"Developers often duplicate effort by maintaining Data Transfer Objects (DTOs) or interfaces on both sides of the application, which increases the chance of human error. While runtime validators and tests help, they do not eliminate the risk entirely. The result is fragile systems and slower development velocity.",[173,174],"hr",{},[152,176,178],{"id":177},"the-solution-end-to-end-type-safety","The Solution: End-to-End Type Safety",[157,180,181],{},"The modern approach solves this issue by defining types once and ensuring that both backend and frontend consume them directly. Instead of duplicating definitions, type inference ensures the contract between layers is enforced at compile time. This guarantees that if the backend changes, the frontend will immediately surface errors during development.",[157,183,184],{},"End-to-end type safety represents a paradigm shift: types are no longer limited to individual layers, but act as a shared source of truth across the entire application stack.",[173,186],{},[152,188,190],{"id":189},"tooling-for-type-safe-backends","Tooling for Type-Safe Backends",[152,192,194],{"id":193},"trpc-apis-without-boilerplate",[195,196,197],"strong",{},"tRPC: APIs Without Boilerplate",[157,199,200],{},"tRPC allows developers to build fully type-safe APIs without the need for REST or GraphQL schemas. By declaring procedures on the server, the client can automatically infer their types.",[202,203,208],"pre",{"className":204,"code":205,"language":206,"meta":207,"style":207},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F server\u002Frouter.ts\nexport const appRouter = t.router({\n  user: t.procedure.query(() => {\n    return { id: 1, name: \"Alice\" };\n  }),\n});\n\n\u002F\u002F client\nconst user = await trpc.user.query();\n\u002F\u002F user is typed as { id: number, name: string }\n","tsx","",[161,209,210,219,254,287,326,338,349,356,362,392],{"__ignoreMap":207},[211,212,215],"span",{"class":213,"line":214},"line",1,[211,216,218],{"class":217},"sHwdD","\u002F\u002F server\u002Frouter.ts\n",[211,220,222,226,230,234,238,241,244,248,251],{"class":213,"line":221},2,[211,223,225],{"class":224},"s7zQu","export",[211,227,229],{"class":228},"spNyl"," const",[211,231,233],{"class":232},"sTEyZ"," appRouter ",[211,235,237],{"class":236},"sMK4o","=",[211,239,240],{"class":232}," t",[211,242,243],{"class":236},".",[211,245,247],{"class":246},"s2Zo4","router",[211,249,250],{"class":232},"(",[211,252,253],{"class":236},"{\n",[211,255,257,261,264,266,268,271,273,276,278,281,284],{"class":213,"line":256},3,[211,258,260],{"class":259},"swJcz","  user",[211,262,263],{"class":236},":",[211,265,240],{"class":232},[211,267,243],{"class":236},[211,269,270],{"class":232},"procedure",[211,272,243],{"class":236},[211,274,275],{"class":246},"query",[211,277,250],{"class":232},[211,279,280],{"class":236},"()",[211,282,283],{"class":228}," =>",[211,285,286],{"class":236}," {\n",[211,288,290,293,296,299,301,305,308,311,313,316,320,323],{"class":213,"line":289},4,[211,291,292],{"class":224},"    return",[211,294,295],{"class":236}," {",[211,297,298],{"class":259}," id",[211,300,263],{"class":236},[211,302,304],{"class":303},"sbssI"," 1",[211,306,307],{"class":236},",",[211,309,310],{"class":259}," name",[211,312,263],{"class":236},[211,314,315],{"class":236}," \"",[211,317,319],{"class":318},"sfazB","Alice",[211,321,322],{"class":236},"\"",[211,324,325],{"class":236}," };\n",[211,327,329,332,335],{"class":213,"line":328},5,[211,330,331],{"class":236},"  }",[211,333,334],{"class":232},")",[211,336,337],{"class":236},",\n",[211,339,341,344,346],{"class":213,"line":340},6,[211,342,343],{"class":236},"}",[211,345,334],{"class":232},[211,347,348],{"class":236},";\n",[211,350,352],{"class":213,"line":351},7,[211,353,355],{"emptyLinePlaceholder":354},true,"\n",[211,357,359],{"class":213,"line":358},8,[211,360,361],{"class":217},"\u002F\u002F client\n",[211,363,365,368,371,373,376,379,381,384,386,388,390],{"class":213,"line":364},9,[211,366,367],{"class":228},"const",[211,369,370],{"class":232}," user ",[211,372,237],{"class":236},[211,374,375],{"class":224}," await",[211,377,378],{"class":232}," trpc",[211,380,243],{"class":236},[211,382,383],{"class":232},"user",[211,385,243],{"class":236},[211,387,275],{"class":246},[211,389,280],{"class":232},[211,391,348],{"class":236},[211,393,395],{"class":213,"line":394},10,[211,396,397],{"class":217},"\u002F\u002F user is typed as { id: number, name: string }\n",[157,399,400],{},"This eliminates redundant type definitions and ensures the frontend always matches the backend.",[173,402],{},[152,404,406],{"id":405},"zod-runtime-validation-with-type-inference",[195,407,408],{},"Zod: Runtime Validation with Type Inference",[157,410,411],{},"Zod bridges the gap between runtime validation and compile-time safety. It allows developers to validate inputs and outputs while also inferring their TypeScript types.",[202,413,415],{"className":204,"code":414,"language":206,"meta":207,"style":207},"const UserSchema = z.object({\n  id: z.number(),\n  name: z.string(),\n});\n\ntype User = z.infer\u003Ctypeof UserSchema>;\n",[161,416,417,438,456,474,482,486],{"__ignoreMap":207},[211,418,419,421,424,426,429,431,434,436],{"class":213,"line":214},[211,420,367],{"class":228},[211,422,423],{"class":232}," UserSchema ",[211,425,237],{"class":236},[211,427,428],{"class":232}," z",[211,430,243],{"class":236},[211,432,433],{"class":246},"object",[211,435,250],{"class":232},[211,437,253],{"class":236},[211,439,440,443,445,447,449,452,454],{"class":213,"line":221},[211,441,442],{"class":259},"  id",[211,444,263],{"class":236},[211,446,428],{"class":232},[211,448,243],{"class":236},[211,450,451],{"class":246},"number",[211,453,280],{"class":232},[211,455,337],{"class":236},[211,457,458,461,463,465,467,470,472],{"class":213,"line":256},[211,459,460],{"class":259},"  name",[211,462,263],{"class":236},[211,464,428],{"class":232},[211,466,243],{"class":236},[211,468,469],{"class":246},"string",[211,471,280],{"class":232},[211,473,337],{"class":236},[211,475,476,478,480],{"class":213,"line":289},[211,477,343],{"class":236},[211,479,334],{"class":232},[211,481,348],{"class":236},[211,483,484],{"class":213,"line":328},[211,485,355],{"emptyLinePlaceholder":354},[211,487,488,491,495,498,500,502,505,508,511],{"class":213,"line":340},[211,489,490],{"class":228},"type",[211,492,494],{"class":493},"sBMFI"," User",[211,496,497],{"class":236}," =",[211,499,428],{"class":493},[211,501,243],{"class":236},[211,503,504],{"class":493},"infer",[211,506,507],{"class":236},"\u003Ctypeof",[211,509,510],{"class":232}," UserSchema",[211,512,513],{"class":236},">;\n",[157,515,516],{},"With Zod, developers can be confident that incoming data is both validated and typed, preventing unsafe assumptions.",[173,518],{},[152,520,522],{"id":521},"drizzle-orm-type-safe-database-queries",[195,523,524],{},"Drizzle ORM: Type-Safe Database Queries",[157,526,527],{},"Drizzle ORM redefines database access by making queries fully type-safe. Unlike traditional ORMs, which rely heavily on runtime, Drizzle ensures schema definitions directly inform TypeScript types.",[202,529,531],{"className":204,"code":530,"language":206,"meta":207,"style":207},"const users = await db.select().from(User).where(eq(User.id, 1));\n\u002F\u002F users is typed as User[]\n",[161,532,533,589],{"__ignoreMap":207},[211,534,535,537,540,542,544,547,549,552,554,556,559,562,564,567,569,572,575,577,580,582,584,587],{"class":213,"line":214},[211,536,367],{"class":228},[211,538,539],{"class":232}," users ",[211,541,237],{"class":236},[211,543,375],{"class":224},[211,545,546],{"class":232}," db",[211,548,243],{"class":236},[211,550,551],{"class":246},"select",[211,553,280],{"class":232},[211,555,243],{"class":236},[211,557,558],{"class":246},"from",[211,560,561],{"class":232},"(User)",[211,563,243],{"class":236},[211,565,566],{"class":246},"where",[211,568,250],{"class":232},[211,570,571],{"class":246},"eq",[211,573,574],{"class":232},"(User",[211,576,243],{"class":236},[211,578,579],{"class":232},"id",[211,581,307],{"class":236},[211,583,304],{"class":303},[211,585,586],{"class":232},"))",[211,588,348],{"class":236},[211,590,591],{"class":213,"line":221},[211,592,593],{"class":217},"\u002F\u002F users is typed as User[]\n",[157,595,596],{},"This integration provides end-to-end confidence: from the database, through the backend, all the way to the frontend.",[173,598],{},[152,600,602],{"id":601},"benefits-of-type-safe-backends","Benefits of Type-Safe Backends",[604,605,606,613,619,625],"ul",{},[607,608,609,612],"li",{},[195,610,611],{},"Developer Productivity",": No more duplicating DTOs or writing manual type definitions.",[607,614,615,618],{},[195,616,617],{},"Fewer Runtime Errors",": Bugs caused by type mismatches are caught at compile time.",[607,620,621,624],{},[195,622,623],{},"Scalability",": Larger teams can collaborate effectively without misaligned contracts.",[607,626,627,630],{},[195,628,629],{},"Safer Refactoring",": Strong typing ensures changes are flagged before they reach production.",[157,632,633],{},"Together, these benefits create a smoother, faster, and more reliable development experience.",[173,635],{},[152,637,639],{"id":638},"trade-offs-to-consider","Trade-Offs to Consider",[157,641,642],{},"While powerful, the type-safe backend approach does come with trade-offs:",[604,644,645,651,657],{},[607,646,647,650],{},[195,648,649],{},"Learning Curve",": Teams must learn new tools and patterns.",[607,652,653,656],{},[195,654,655],{},"Ecosystem Lock-In",": Solutions like tRPC are tightly coupled with TypeScript.",[607,658,659,662],{},[195,660,661],{},"Performance Considerations",": Runtime validators like Zod can add overhead in large applications.",[157,664,665],{},"Despite these challenges, the advantages often outweigh the costs, especially in applications where correctness and maintainability are priorities.",[173,667],{},[152,669,671],{"id":670},"the-future-outlook-current-projects-in-mllrdev","The Future Outlook — current projects in MllrDev",[157,673,674,675,678],{},"At PreeshCo., we are experiencing firsthand the benefits of adopting these type-safe backend practices. Our ongoing work with ",[195,676,677],{},"Drizzle ORM"," has allowed us to simplify our database interactions while ensuring that shared types are consistent from end to end. The adoption of Drizzle’s standards has already improved our development process, making it easier to align backend and frontend logic without redundant type definitions.",[157,680,681],{},"As we continue to integrate these tools into our workflows, we expect even greater efficiency and reliability across our applications. For us, type-safe backends are no longer a trend on the horizon—they are becoming the practical foundation of how we build software today.",[173,683],{},[152,685,687],{"id":686},"conclusion","Conclusion",[157,689,690],{},"The shift toward type-safe backends represents a major evolution in the JavaScript and TypeScript ecosystem. By uniting tools like tRPC, Zod, and Drizzle ORM, developers can build systems where types are defined once and reliably enforced across every layer. This approach eliminates mismatches, improves productivity, and makes applications more robust.",[157,692,693],{},"For organizations, adopting type-safe backends is more than a technical improvement; it is a strategic move toward building scalable, maintainable, and future-ready software. As end-to-end type safety continues to rise, it will shape the way modern applications are designed and developed.",[173,695],{},[697,698,699],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":207,"searchDepth":221,"depth":221,"links":701},[702,703,704,705,706,707,708,709,710,711],{"id":154,"depth":256,"text":155},{"id":177,"depth":256,"text":178},{"id":189,"depth":256,"text":190},{"id":193,"depth":256,"text":197},{"id":405,"depth":256,"text":408},{"id":521,"depth":256,"text":524},{"id":601,"depth":256,"text":602},{"id":638,"depth":256,"text":639},{"id":670,"depth":256,"text":671},{"id":686,"depth":256,"text":687},"2025-08-01","*By Sean Erick C. Ramones, Vue SME | JavaScript\u002FTypScript SME*","md","https:\u002F\u002Fimages.pexels.com\u002Fphotos\u002F226232\u002Fpexels-photo-226232.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",{},{"title":86,"description":713},"P1BhAwV7rnhmYSdkTobxOYm0I2iswaXh3qS6WyyQBxA",[720,722],{"title":82,"path":83,"stem":84,"description":721,"children":-1},"*By Sean Erick C. Ramones, Vue SME | JavaScript\u002FTypeScript SME*",{"title":90,"path":91,"stem":92,"description":721,"children":-1},1779638276797]