[{"data":1,"prerenderedAt":820},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002Funderstanding-hydration-issues-in-nuxt-and-how-nuxt-hints-helps":142,"\u002Fblog\u002Funderstanding-hydration-issues-in-nuxt-and-how-nuxt-hints-helps-surround":817},[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":138,"author":144,"body":148,"date":810,"description":811,"extension":812,"image":813,"meta":814,"minRead":475,"navigation":478,"path":139,"seo":815,"stem":140,"__hash__":816},"blog\u002Fblog\u002F034.understanding-hydration-issues-in-nuxt-and-how-nuxt-hints-helps.md",{"name":145,"avatar":146},"Sean Erick C. Ramones",{"src":147,"alt":145},"\u002Favatars\u002Fprofile-image-1.png",{"type":149,"value":150,"toc":784},"minimark",[151,156,160,176,179,182,191,194,197,201,204,207,212,215,255,258,260,264,291,294,296,300,315,318,320,324,326,334,337,339,343,346,349,366,369,371,375,378,381,383,387,390,393,427,430,432,436,439,520,523,526,529,532,535,538,541,543,547,550,553,556,585,588,590,594,598,601,603,607,610,612,616,619,630,633,635,639,642,653,656,659,661,665,668,685,688,691,695,698,701,704,715,718,720,724,735,738,740,744,747,750,753,756,759,762,764,768,771,774,777,780],[152,153,155],"h2",{"id":154},"what-is-hydration","What Is Hydration?",[157,158,159],"p",{},"In a Nuxt SSR application:",[161,162,163,167,170,173],"ol",{},[164,165,166],"li",{},"The server renders HTML.",[164,168,169],{},"The browser receives static HTML.",[164,171,172],{},"Vue attaches interactivity to that HTML.",[164,174,175],{},"The app becomes fully interactive.",[157,177,178],{},"Step 3 is called hydration.",[157,180,181],{},"Hydration assumes that:",[183,184,185,188],"ul",{},[164,186,187],{},"The HTML generated on the server",[164,189,190],{},"Matches exactly what Vue expects to render on the client",[157,192,193],{},"If they differ, Vue logs hydration warnings and may re-render parts of the DOM.",[195,196],"hr",{},[152,198,200],{"id":199},"what-causes-hydration-issues","What Causes Hydration Issues?",[157,202,203],{},"Hydration mismatches typically happen when server and client produce different output.",[157,205,206],{},"Common causes:",[208,209,211],"h3",{"id":210},"_1-using-non-deterministic-values","1. Using Non-Deterministic Values",[157,213,214],{},"Example:",[216,217,222],"pre",{"className":218,"code":219,"language":220,"meta":221,"style":221},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const id = Math.random()\n","jsx","",[223,224,225],"code",{"__ignoreMap":221},[226,227,230,234,238,242,245,248,252],"span",{"class":228,"line":229},"line",1,[226,231,233],{"class":232},"spNyl","const",[226,235,237],{"class":236},"sTEyZ"," id ",[226,239,241],{"class":240},"sMK4o","=",[226,243,244],{"class":236}," Math",[226,246,247],{"class":240},".",[226,249,251],{"class":250},"s2Zo4","random",[226,253,254],{"class":236},"()\n",[157,256,257],{},"Server and client generate different values.",[195,259],{},[208,261,263],{"id":262},"_2-using-date-or-time-during-render","2. Using Date or Time During Render",[216,265,267],{"className":218,"code":266,"language":220,"meta":221,"style":221},"const now = newDate().toISOString()\n",[223,268,269],{"__ignoreMap":221},[226,270,271,273,276,278,281,284,286,289],{"class":228,"line":229},[226,272,233],{"class":232},[226,274,275],{"class":236}," now ",[226,277,241],{"class":240},[226,279,280],{"class":250}," newDate",[226,282,283],{"class":236},"()",[226,285,247],{"class":240},[226,287,288],{"class":250},"toISOString",[226,290,254],{"class":236},[157,292,293],{},"Server time and client time may differ by milliseconds or timezone.",[195,295],{},[208,297,299],{"id":298},"_3-accessing-browser-only-apis-during-ssr","3. Accessing Browser-Only APIs During SSR",[216,301,303],{"className":218,"code":302,"language":220,"meta":221,"style":221},"window.innerWidth\n",[223,304,305],{"__ignoreMap":221},[226,306,307,310,312],{"class":228,"line":229},[226,308,309],{"class":236},"window",[226,311,247],{"class":240},[226,313,314],{"class":236},"innerWidth\n",[157,316,317],{},"This is undefined on the server.",[195,319],{},[208,321,323],{"id":322},"_4-conditional-rendering-based-on-client-state","4. Conditional Rendering Based on Client State",[157,325,214],{},[183,327,328,331],{},[164,329,330],{},"Rendering different content based on screen size",[164,332,333],{},"Rendering differently depending on user local storage",[157,335,336],{},"If the condition is evaluated differently server vs client, mismatch occurs.",[195,338],{},[152,340,342],{"id":341},"why-hydration-issues-matter","Why Hydration Issues Matter",[157,344,345],{},"Hydration warnings are often ignored because the app still “works.”",[157,347,348],{},"However, consequences include:",[183,350,351,354,357,360,363],{},[164,352,353],{},"Unnecessary client re-renders",[164,355,356],{},"Performance degradation",[164,358,359],{},"Flickering UI",[164,361,362],{},"Hard-to-debug edge cases",[164,364,365],{},"Inconsistent production behavior",[157,367,368],{},"In larger applications, hydration problems compound quickly.",[195,370],{},[152,372,374],{"id":373},"enter-nuxt-hints","Enter Nuxt Hints",[157,376,377],{},"Nuxt Hints is a Nuxt module designed to detect SSR and hydration pitfalls during development.",[157,379,380],{},"Instead of discovering hydration issues in production logs, developers get proactive hints in development.",[195,382],{},[152,384,386],{"id":385},"what-nuxt-hints-does","What Nuxt Hints Does",[157,388,389],{},"Nuxt Hints analyzes your code and flags patterns that commonly cause hydration mismatches.",[157,391,392],{},"Examples of what it warns about:",[183,394,395,402,408,418,424],{},[164,396,397,398,401],{},"Using ",[223,399,400],{},"Math.random()"," during render",[164,403,397,404,407],{},[223,405,406],{},"Date"," in template setup",[164,409,410,411,413,414,417],{},"Accessing ",[223,412,309],{}," or ",[223,415,416],{},"document"," directly",[164,419,420,421],{},"Non-serializable state in ",[223,422,423],{},"useState",[164,425,426],{},"Client-only logic leaking into SSR",[157,428,429],{},"It acts as an early-warning system.",[195,431],{},[152,433,435],{"id":434},"example-without-nuxt-hints","Example: Without Nuxt Hints",[157,437,438],{},"Component:",[216,440,442],{"className":218,"code":441,"language":220,"meta":221,"style":221},"\u003Cscriptsetup>\n    const id = Math.random();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv>{{ id }}\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[223,443,444,456,462,473,480,490,511],{"__ignoreMap":221},[226,445,446,449,453],{"class":228,"line":229},[226,447,448],{"class":240},"\u003C",[226,450,452],{"class":451},"swJcz","scriptsetup",[226,454,455],{"class":240},">\n",[226,457,459],{"class":228,"line":458},2,[226,460,461],{"class":236},"    const id = Math.random();\n",[226,463,465,468,471],{"class":228,"line":464},3,[226,466,467],{"class":240},"\u003C\u002F",[226,469,470],{"class":451},"script",[226,472,455],{"class":240},[226,474,476],{"class":228,"line":475},4,[226,477,479],{"emptyLinePlaceholder":478},true,"\n",[226,481,483,485,488],{"class":228,"line":482},5,[226,484,448],{"class":240},[226,486,487],{"class":451},"template",[226,489,455],{"class":240},[226,491,493,496,499,502,504,507,509],{"class":228,"line":492},6,[226,494,495],{"class":240},"    \u003C",[226,497,498],{"class":451},"div",[226,500,501],{"class":240},">{{",[226,503,237],{"class":236},[226,505,506],{"class":240},"}}\u003C\u002F",[226,508,498],{"class":451},[226,510,455],{"class":240},[226,512,514,516,518],{"class":228,"line":513},7,[226,515,467],{"class":240},[226,517,487],{"class":451},[226,519,455],{"class":240},[157,521,522],{},"Server generates:",[157,524,525],{},"0.48392",[157,527,528],{},"Client generates:",[157,530,531],{},"0.91837",[157,533,534],{},"Result:",[157,536,537],{},"Hydration mismatch.",[157,539,540],{},"Without tooling, this might go unnoticed.",[195,542],{},[152,544,546],{"id":545},"example-with-nuxt-hints","Example: With Nuxt Hints",[157,548,549],{},"Nuxt Hints detects the use of non-deterministic values during SSR and flags it during development.",[157,551,552],{},"Instead of debugging hydration logs later, the issue is identified immediately.",[157,554,555],{},"Correct pattern:",[216,557,559],{"className":218,"code":558,"language":220,"meta":221,"style":221},"\u003Cscript setup>\nconst id = useState(\"id\", () => Math.random())\n\u003C\u002Fscript>\n",[223,560,561,572,577],{"__ignoreMap":221},[226,562,563,565,567,570],{"class":228,"line":229},[226,564,448],{"class":240},[226,566,470],{"class":451},[226,568,569],{"class":232}," setup",[226,571,455],{"class":240},[226,573,574],{"class":228,"line":458},[226,575,576],{"class":236},"const id = useState(\"id\", () => Math.random())\n",[226,578,579,581,583],{"class":228,"line":464},[226,580,467],{"class":240},[226,582,470],{"class":451},[226,584,455],{"class":240},[157,586,587],{},"Now the value is generated once and shared between server and client.",[195,589],{},[152,591,593],{"id":592},"strategic-value-of-nuxt-hints","Strategic Value of Nuxt Hints",[208,595,597],{"id":596},"_1-reduced-production-risk","1. Reduced Production Risk",[157,599,600],{},"Hydration bugs often appear only under specific conditions. Catching them during development lowers long-term maintenance cost.",[195,602],{},[208,604,606],{"id":605},"_2-improved-performance-stability","2. Improved Performance Stability",[157,608,609],{},"Avoiding hydration mismatches prevents unnecessary DOM re-renders.",[195,611],{},[208,613,615],{"id":614},"_3-better-developer-awareness","3. Better Developer Awareness",[157,617,618],{},"Teams become more conscious of:",[183,620,621,624,627],{},[164,622,623],{},"SSR-safe patterns",[164,625,626],{},"Deterministic rendering",[164,628,629],{},"State serialization boundaries",[157,631,632],{},"This improves code quality overall.",[195,634],{},[208,636,638],{"id":637},"_4-scales-with-application-complexity","4. Scales With Application Complexity",[157,640,641],{},"As applications grow:",[183,643,644,647,650],{},[164,645,646],{},"More conditional rendering",[164,648,649],{},"More user personalization",[164,651,652],{},"More client-specific logic",[157,654,655],{},"The risk of hydration drift increases.",[157,657,658],{},"Nuxt Hints acts as a guardrail.",[195,660],{},[152,662,664],{"id":663},"when-is-this-most-relevant","When Is This Most Relevant?",[157,666,667],{},"Hydration awareness becomes critical when:",[183,669,670,673,676,679,682],{},[164,671,672],{},"Building marketing pages with SSR",[164,674,675],{},"Implementing authentication logic",[164,677,678],{},"Rendering user-specific content",[164,680,681],{},"Working with time-sensitive data",[164,683,684],{},"Integrating third-party browser APIs",[157,686,687],{},"For internal tools with minimal SSR complexity, risk is lower.",[157,689,690],{},"For public-facing or SEO-heavy apps, risk is higher.",[208,692,694],{"id":693},"strategic-value-for-projects-like-preesh-and-roommejts","Strategic value for projects like Preesh and Roommejts",[157,696,697],{},"Since Preesh handles personalized content (thank-you cards, employee data, preview rendering, PDF export), consistency between server and client is critical.",[157,699,700],{},"Same goes for Roommejts where there are login\u002Fuser states that should be handled both in the server layer to the client.",[157,702,703],{},"Using Nuxt Hints:",[183,705,706,709,712],{},[164,707,708],{},"Reduces debugging time",[164,710,711],{},"Makes SSR more predictable",[164,713,714],{},"Protects UX quality as the product grows",[157,716,717],{},"Given that we chose Nitro instead of a separate Express or Hono backend, tightening SSR discipline becomes even more important because everything lives in one runtime boundary.",[195,719],{},[152,721,723],{"id":722},"limitations-of-nuxt-hints","Limitations of Nuxt Hints",[183,725,726,729,732],{},[164,727,728],{},"It does not fix issues automatically",[164,730,731],{},"It depends on development discipline",[164,733,734],{},"Some edge cases still require manual architectural decisions",[157,736,737],{},"It is a diagnostic tool, not a runtime patch.",[195,739],{},[152,741,743],{"id":742},"recommended-approach","Recommended Approach",[157,745,746],{},"Short term:",[157,748,749],{},"Add Nuxt Hints to all new Nuxt projects by default.",[157,751,752],{},"Medium term:",[157,754,755],{},"Audit existing SSR pages for hydration warnings.",[157,757,758],{},"Long term:",[157,760,761],{},"Establish internal SSR-safe development guidelines.",[195,763],{},[152,765,767],{"id":766},"key-takeaway","Key Takeaway",[157,769,770],{},"Hydration mismatches are one of the most common and under-discussed risks in SSR applications.",[157,772,773],{},"Nuxt provides powerful SSR capabilities, but those capabilities require deterministic rendering.",[157,775,776],{},"Nuxt Hints adds visibility and guardrails, helping teams prevent subtle bugs before they reach production.",[157,778,779],{},"It is a small addition that significantly improves long-term stability.",[781,782,783],"style",{},"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 .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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":221,"searchDepth":458,"depth":458,"links":785},[786,787,793,794,795,796,797,798,804,807,808,809],{"id":154,"depth":458,"text":155},{"id":199,"depth":458,"text":200,"children":788},[789,790,791,792],{"id":210,"depth":464,"text":211},{"id":262,"depth":464,"text":263},{"id":298,"depth":464,"text":299},{"id":322,"depth":464,"text":323},{"id":341,"depth":458,"text":342},{"id":373,"depth":458,"text":374},{"id":385,"depth":458,"text":386},{"id":434,"depth":458,"text":435},{"id":545,"depth":458,"text":546},{"id":592,"depth":458,"text":593,"children":799},[800,801,802,803],{"id":596,"depth":464,"text":597},{"id":605,"depth":464,"text":606},{"id":614,"depth":464,"text":615},{"id":637,"depth":464,"text":638},{"id":663,"depth":458,"text":664,"children":805},[806],{"id":693,"depth":464,"text":694},{"id":722,"depth":458,"text":723},{"id":742,"depth":458,"text":743},{"id":766,"depth":458,"text":767},"2026-02-01","*By Sean Erick C. Ramones, Vue SME | JavaScript\u002FTypeScript SME*","md","https:\u002F\u002Fimages.pexels.com\u002Fphotos\u002F5380607\u002Fpexels-photo-5380607.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",{},{"title":138,"description":811},"tQ2qMpfbzvLzgjF5TuJegcu9OLn8qGuEM0wauvf131w",[818,819],{"title":134,"path":135,"stem":136,"description":811,"children":-1},null,1779638275903]