[{"data":1,"prerenderedAt":878},["ShallowReactive",2],{"navigation":3,"/blog/introducing-vues-latest-experimental-vapor-mode":142,"/blog/introducing-vues-latest-experimental-vapor-mode-surround":875},[4],{"title":5,"path":6,"stem":7,"children":8,"page":141},"Blog","/blog","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","/blog/vuejs-introducing-dynamic-layouts-using-the-atomic-design-principles","blog/001.vuejs-introducing-dynamic-layouts-using-the-atomic-design-principles",{"title":14,"path":15,"stem":16},"Understanding JavaScript and Its Quirks","/blog/understanding-javascript-and-its-quirks","blog/002.understanding-javascript-and-its-quirks",{"title":18,"path":19,"stem":20},"Introducing Vue’s latest experimental Vapor Mode","/blog/introducing-vues-latest-experimental-vapor-mode","blog/003.introducing-vues-latest-experimental-vapor-mode",{"title":22,"path":23,"stem":24},"ECMAScript 2024 Nears Finalization","/blog/ecmascript-2024-nears-finalization","blog/004.ecmascript-2024-nears-finalization",{"title":26,"path":27,"stem":28},"UI Libraries for VueJS: Vuetify, Tailwind, and PrimeVue","/blog/ui-libraries-for-vuejs-vuetify-tailwind-and-primevue","blog/005.ui-libraries-for-vuejs-vuetify-tailwind-and-primevue",{"title":30,"path":31,"stem":32},"Micro Frontend Architecture","/blog/micro-frontend-architecture","blog/006.micro-frontend-architecture",{"title":34,"path":35,"stem":36},"Pre-rendering and Hydration in Vue.js","/blog/pre-rendering-and-hydration-in-vuejs","blog/007.pre-rendering-and-hydration-in-vuejs",{"title":38,"path":39,"stem":40},"Satori by Vercel — Dynamic Image Generation in JavaScript","/blog/satori-by-vercel-dynamic-image-generation-in-javascript","blog/008.satori-by-vercel-dynamic-image-generation-in-javascript",{"title":42,"path":43,"stem":44},"Vue.js and Progressive Web Apps (PWA) – Enhancing Web Experiences","/blog/vuejs-and-progressive-web-apps-pwa-enhancing-web-experiences","blog/009.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","/blog/moving-from-a-traditional-nodejs-crud-api-to-serverless-architecturea-deep-dive","blog/010.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","/blog/nuxt-3-and-serverless-edge-functionsunlocking-performance-and-scalability","blog/011.nuxt-3-and-serverless-edge-functionsunlocking-performance-and-scalability",{"title":54,"path":55,"stem":56},"A Tribute to Asa Bain: Thank You for Everything","/blog/a-tribute-to-asa-bain-thank-you-for-everything","blog/012.a-tribute-to-asa-bain-thank-you-for-everything",{"title":58,"path":59,"stem":60},"Migrating JavaScript to TypeScript in ASP.NET MVC Projects","/blog/migrating-javascript-to-typescript-in-aspnet-mvc-projects","blog/013.migrating-javascript-to-typescript-in-aspnet-mvc-projects",{"title":62,"path":63,"stem":64},"Modernizing Classic ASP.NET MVC with Vue.js","/blog/modernizing-classic-aspnet-mvc-with-vuejs","blog/014.modernizing-classic-aspnet-mvc-with-vuejs",{"title":66,"path":67,"stem":68},"Which UI JavaScript Framework Should You Use?","/blog/which-ui-javascript-framework-should-you-use","blog/015.which-ui-javascript-framework-should-you-use",{"title":70,"path":71,"stem":72},"Vue + AI Integration Workflows: Enhancing Developer Productivity","/blog/vue-ai-integration-workflows-enhancing-developer-productivity","blog/016.vue-ai-integration-workflows-enhancing-developer-productivity",{"title":74,"path":75,"stem":76},"OpenAPI Standards & Scalar Integration for Node.js Apps","/blog/openapi-standards-scalar-integration-for-nodejs-apps","blog/017.openapi-standards-scalar-integration-for-nodejs-apps",{"title":78,"path":79,"stem":80},"Nuxt 3.17 — Data Fetching Improvements","/blog/nuxt-317-data-fetching-improvements","blog/019.nuxt-317-data-fetching-improvements",{"title":82,"path":83,"stem":84},"Subdomain-Based Multi-Tenancy in Nuxt","/blog/subdomain-based-multi-tenancy-in-nuxt","blog/020.subdomain-based-multi-tenancy-in-nuxt",{"title":86,"path":87,"stem":88},"Type-Safe Backends with TypeScript: tRPC, Zod, and Drizzle ORM","/blog/type-safe-backends-with-typescript-trpc-zod-and-drizzle-orm","blog/021.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","/blog/unit-testing-vue-applications-with-vitest-and-agentic-ai","blog/022.unit-testing-vue-applications-with-vitest-and-agentic-ai",{"title":94,"path":95,"stem":96},"Hidden Features & Lesser-Known TypeScript Gems","/blog/hidden-features-lesser-known-typescript-gems","blog/023.hidden-features-lesser-known-typescript-gems",{"title":98,"path":99,"stem":100},"Nuxt/Vercel Acquisition and Its Impact on NuxtHub Users","/blog/nuxtvercel-acquisition-and-its-impact-on-nuxthub-users","blog/024.nuxtvercel-acquisition-and-its-impact-on-nuxthub-users",{"title":102,"path":103,"stem":104},"State of Vue & Nuxt Ecosystem 2025","/blog/state-of-vue-nuxt-ecosystem-2025","blog/025.state-of-vue-nuxt-ecosystem-2025",{"title":106,"path":107,"stem":108},"Feature Adoption in TypeScript Over Time","/blog/feature-adoption-in-typescript-over-time","blog/026.feature-adoption-in-typescript-over-time",{"title":110,"path":111,"stem":112},"Migrating From WordPress to Nuxt Content & Using Nuxt Studio","/blog/migrating-from-wordpress-to-nuxt-content-using-nuxt-studio","blog/027.migrating-from-wordpress-to-nuxt-content-using-nuxt-studio",{"title":114,"path":115,"stem":116},"Strategic Topic: The “Rust-ification” of Tooling (Biome & Rolldown)","/blog/strategic-topic-the-rust-ification-of-tooling-biome-rolldown","blog/028.strategic-topic-the-rust-ification-of-tooling-biome-rolldown",{"title":118,"path":119,"stem":120},"Nuxt 4 and the Evolving Full-Stack Framework Landscape","/blog/nuxt-4-and-the-evolving-full-stack-framework-landscape","blog/029.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","/blog/bun-as-a-javascript-runtime-evaluating-readiness-beyond-nodejs","blog/030.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","/blog/top-10-nuxt-modules-that-supercharge-your-app-from-day-one-introduction","blog/031.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","/blog/strategic-topic-vite-voidzero-and-the-future-of-frontend-tooling","blog/032.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","/blog/the-future-of-time-in-javascript-transitioning-to-the-native-temporal-api","blog/033.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","/blog/understanding-hydration-issues-in-nuxt-and-how-nuxt-hints-helps","blog/034.understanding-hydration-issues-in-nuxt-and-how-nuxt-hints-helps",false,{"id":143,"title":18,"author":144,"body":148,"date":868,"description":869,"extension":870,"image":871,"meta":872,"minRead":398,"navigation":422,"path":19,"seo":873,"stem":20,"__hash__":874},"blog/blog/003.introducing-vues-latest-experimental-vapor-mode.md",{"name":145,"avatar":146},"Sean Erick C. Ramones",{"src":147,"alt":145},"/avatars/profile-image-1.png",{"type":149,"value":150,"toc":853},"minimark",[151,159,175,178,185,290,292,298,301,303,309,319,325,334,521,527,534,668,674,680,682,688,717,719,725,728,731,751,753,759,779,781,787,813,815,821,824,839,842,844,850],[152,153,155],"h2",{"id":154},"overview",[156,157,158],"strong",{},"Overview",[160,161,162,163,166,167,174],"p",{},"Vue.js is renowned for its approachable syntax and efficient runtime. However, as performance demands increase for UI-heavy or real-time applications, Vue has introduced ",[156,164,165],{},"Vapor Mode",". This experimental mode eliminates the virtual DOM (",[168,169,173],"a",{"href":170,"rel":171},"https://vuejs.org/guide/extras/rendering-mechanism",[172],"nofollow","vDOM",") and pre-compiles templates for faster rendering, making it ideal for high-performance scenarios.",[176,177],"hr",{},[179,180,182],"h3",{"id":181},"key-differences",[156,183,184],{},"Key Differences",[186,187,188,203],"table",{},[189,190,191],"thead",{},[192,193,194,198,201],"tr",{},[195,196,197],"th",{},"Feature",[195,199,200],{},"Default Mode",[195,202,165],{},[204,205,206,225,238,251,264,277],"tbody",{},[192,207,208,214,220],{},[209,210,211],"td",{},[156,212,213],{},"File Naming",[209,215,216],{},[217,218,219],"code",{},".vue",[209,221,222],{},[217,223,224],{},".vapor.vue",[192,226,227,232,235],{},[209,228,229],{},[156,230,231],{},"Syntax",[209,233,234],{},"Options API / Composition API",[209,236,237],{},"Composition API",[192,239,240,245,248],{},[209,241,242],{},[156,243,244],{},"Virtual DOM",[209,246,247],{},"Uses vDOM for diffing and patching",[209,249,250],{},"No vDOM; pre-compiles templates directly to DOM operations",[192,252,253,258,261],{},[209,254,255],{},[156,256,257],{},"Rendering",[209,259,260],{},"Runtime template compilation",[209,262,263],{},"Direct DOM rendering (pre-compiled)",[192,265,266,271,274],{},[209,267,268],{},[156,269,270],{},"Reactivity",[209,272,273],{},"Fully reactive",[209,275,276],{},"Manually managed (if needed)",[192,278,279,284,287],{},[209,280,281],{},[156,282,283],{},"Performance",[209,285,286],{},"General-purpose, suitable for most apps",[209,288,289],{},"Optimized for performance-critical components",[176,291],{},[179,293,295],{"id":294},"how-vapor-mode-works",[156,296,297],{},"How Vapor Mode Works",[160,299,300],{},"Vapor Mode removes the vDOM and instead relies on pre-compiled, direct DOM manipulation for rendering. By bypassing the vDOM diffing process, Vapor Mode eliminates the overhead of reconciling the virtual and actual DOM, making it faster for specific use cases.",[176,302],{},[179,304,306],{"id":305},"syntax-and-usage",[156,307,308],{},"Syntax and Usage",[160,310,311,312,315,316,318],{},"The syntax in Vapor Mode is ",[156,313,314],{},"almost identical"," to the Composition API. The key difference lies in the file extension (",[217,317,224],{},") and the optimizations applied during the build process.",[179,320,322],{"id":321},"default-mode-example",[156,323,324],{},"Default Mode Example",[160,326,327],{},[328,329,330,331],"em",{},"File: ",[217,332,333],{},"GraphComponent.vue",[335,336,341],"pre",{"className":337,"code":338,"language":339,"meta":340,"style":340},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Csvg :width=\"width\" :height=\"height\">\n    \u003Cpolyline :points=\"points\" style=\"fill: none; stroke: blue;\" />\n  \u003C/svg>\n\u003C/template>\n\n\u003Cscript setup>\nconst data = [10, 20, 30, 40, 50];\nconst width = 400, height = 200;\n\nconst points = data\n  .map((value, index) => `${index * 80},${200 - value * 3}`)\n  .join(' ');\n\u003C/script>\n","jsx","",[217,342,343,359,371,396,406,417,424,437,443,449,454,460,506,512],{"__ignoreMap":340},[344,345,348,352,356],"span",{"class":346,"line":347},"line",1,[344,349,351],{"class":350},"sMK4o","\u003C",[344,353,355],{"class":354},"swJcz","template",[344,357,358],{"class":350},">\n",[344,360,362,365,368],{"class":346,"line":361},2,[344,363,364],{"class":350},"  \u003C",[344,366,367],{"class":354},"svg",[344,369,370],{"class":350}," :width=\"width\" :height=\"height\">\n",[344,372,374,377,381,384,387,391,393],{"class":346,"line":373},3,[344,375,376],{"class":350},"    \u003Cpolyline :points=\"points\" ",[344,378,380],{"class":379},"spNyl","style",[344,382,383],{"class":350},"=",[344,385,386],{"class":350},"\"",[344,388,390],{"class":389},"sfazB","fill: none; stroke: blue;",[344,392,386],{"class":350},[344,394,395],{"class":350}," />\n",[344,397,399,402,404],{"class":346,"line":398},4,[344,400,401],{"class":350},"  \u003C/",[344,403,367],{"class":354},[344,405,358],{"class":350},[344,407,409,412,415],{"class":346,"line":408},5,[344,410,411],{"class":350},"\u003C/",[344,413,355],{"class":414},"sTEyZ",[344,416,358],{"class":350},[344,418,420],{"class":346,"line":419},6,[344,421,423],{"emptyLinePlaceholder":422},true,"\n",[344,425,427,429,432,435],{"class":346,"line":426},7,[344,428,351],{"class":350},[344,430,431],{"class":354},"script",[344,433,434],{"class":379}," setup",[344,436,358],{"class":350},[344,438,440],{"class":346,"line":439},8,[344,441,442],{"class":414},"const data = [10, 20, 30, 40, 50];\n",[344,444,446],{"class":346,"line":445},9,[344,447,448],{"class":414},"const width = 400, height = 200;\n",[344,450,452],{"class":346,"line":451},10,[344,453,423],{"emptyLinePlaceholder":422},[344,455,457],{"class":346,"line":456},11,[344,458,459],{"class":414},"const points = data\n",[344,461,463,466,469,472,475,479,482,485,487,490,493,496,498,501,503],{"class":346,"line":462},12,[344,464,465],{"class":414},"  .map((value, index) => `$",[344,467,468],{"class":350},"{",[344,470,471],{"class":414},"index ",[344,473,474],{"class":350},"*",[344,476,478],{"class":477},"sbssI"," 80",[344,480,481],{"class":350},"}",[344,483,484],{"class":414},",$",[344,486,468],{"class":350},[344,488,489],{"class":477},"200",[344,491,492],{"class":350}," -",[344,494,495],{"class":414}," value ",[344,497,474],{"class":350},[344,499,500],{"class":477}," 3",[344,502,481],{"class":350},[344,504,505],{"class":414},"`)\n",[344,507,509],{"class":346,"line":508},13,[344,510,511],{"class":414},"  .join(' ');\n",[344,513,515,517,519],{"class":346,"line":514},14,[344,516,411],{"class":350},[344,518,431],{"class":354},[344,520,358],{"class":350},[179,522,524],{"id":523},"vapor-mode-example",[156,525,526],{},"Vapor Mode Example",[160,528,529],{},[328,530,330,531],{},[217,532,533],{},"GraphComponent.vapor.vue",[335,535,537],{"className":337,"code":536,"language":339,"meta":340,"style":340},"// The very same code from above! Just with a different .vue extension name!\n\u003Ctemplate>\n  \u003Csvg :width=\"width\" :height=\"height\">\n    \u003Cpolyline :points=\"points\" style=\"fill: none; stroke: blue;\" />\n  \u003C/svg>\n\u003C/template>\n\n\u003Cscript setup>\nconst data = [10, 20, 30, 40, 50];\nconst width = 400, height = 200;\n\nconst points = data\n  .map((value, index) => `${index * 80},${200 - value * 3}`)\n  .join(' ');\n\u003C/script>\n",[217,538,539,545,553,561,577,585,593,597,607,611,615,619,623,655,659],{"__ignoreMap":340},[344,540,541],{"class":346,"line":347},[344,542,544],{"class":543},"sHwdD","// The very same code from above! Just with a different .vue extension name!\n",[344,546,547,549,551],{"class":346,"line":361},[344,548,351],{"class":350},[344,550,355],{"class":354},[344,552,358],{"class":350},[344,554,555,557,559],{"class":346,"line":373},[344,556,364],{"class":350},[344,558,367],{"class":354},[344,560,370],{"class":350},[344,562,563,565,567,569,571,573,575],{"class":346,"line":398},[344,564,376],{"class":350},[344,566,380],{"class":379},[344,568,383],{"class":350},[344,570,386],{"class":350},[344,572,390],{"class":389},[344,574,386],{"class":350},[344,576,395],{"class":350},[344,578,579,581,583],{"class":346,"line":408},[344,580,401],{"class":350},[344,582,367],{"class":354},[344,584,358],{"class":350},[344,586,587,589,591],{"class":346,"line":419},[344,588,411],{"class":350},[344,590,355],{"class":414},[344,592,358],{"class":350},[344,594,595],{"class":346,"line":426},[344,596,423],{"emptyLinePlaceholder":422},[344,598,599,601,603,605],{"class":346,"line":439},[344,600,351],{"class":350},[344,602,431],{"class":354},[344,604,434],{"class":379},[344,606,358],{"class":350},[344,608,609],{"class":346,"line":445},[344,610,442],{"class":414},[344,612,613],{"class":346,"line":451},[344,614,448],{"class":414},[344,616,617],{"class":346,"line":456},[344,618,423],{"emptyLinePlaceholder":422},[344,620,621],{"class":346,"line":462},[344,622,459],{"class":414},[344,624,625,627,629,631,633,635,637,639,641,643,645,647,649,651,653],{"class":346,"line":508},[344,626,465],{"class":414},[344,628,468],{"class":350},[344,630,471],{"class":414},[344,632,474],{"class":350},[344,634,478],{"class":477},[344,636,481],{"class":350},[344,638,484],{"class":414},[344,640,468],{"class":350},[344,642,489],{"class":477},[344,644,492],{"class":350},[344,646,495],{"class":414},[344,648,474],{"class":350},[344,650,500],{"class":477},[344,652,481],{"class":350},[344,654,505],{"class":414},[344,656,657],{"class":346,"line":514},[344,658,511],{"class":414},[344,660,662,664,666],{"class":346,"line":661},15,[344,663,411],{"class":350},[344,665,431],{"class":354},[344,667,358],{"class":350},[179,669,671],{"id":670},"key-takeaway",[156,672,673],{},"Key Takeaway:",[160,675,676,677,679],{},"Vapor Mode eliminates the vDOM and uses direct DOM rendering. With ",[217,678,224],{}," files, templates are compiled directly to DOM operations during the build step, with no runtime diffing.",[176,681],{},[179,683,685],{"id":684},"benefits-of-eliminating-the-vdom",[156,686,687],{},"Benefits of Eliminating the vDOM",[689,690,691,701,709],"ol",{},[692,693,694,697,700],"li",{},[156,695,696],{},"Improved Performance:",[698,699],"br",{},"Vapor Mode avoids the computational cost of vDOM diffing and patching, making it faster for static or predictable UI updates.",[692,702,703,706,708],{},[156,704,705],{},"Reduced Overhead:",[698,707],{},"The lack of vDOM simplifies rendering logic and reduces runtime memory usage, especially in complex or dynamic components.",[692,710,711,714,716],{},[156,712,713],{},"Predictable Output:",[698,715],{},"Since templates are pre-compiled, the generated DOM structure is deterministic, leading to consistent performance.",[176,718],{},[179,720,722],{"id":721},"combining-default-mode-and-vapor-mode",[156,723,724],{},"Combining Default Mode and Vapor Mode",[160,726,727],{},"Default Mode and Vapor Mode can coexist within the same application. Use Default Mode for components requiring reactivity or dynamic behavior, and Vapor Mode for performance-critical components.",[160,729,730],{},"Example:",[732,733,734,741],"ul",{},[692,735,736,737,740],{},"Use Vapor Mode for a ",[156,738,739],{},"real-time chart",".",[692,742,743,744,747,748,740],{},"Use Default Mode for ",[156,745,746],{},"forms"," or ",[156,749,750],{},"interactive UI components",[176,752],{},[179,754,756],{"id":755},"when-to-use-vapor-mode",[156,757,758],{},"When to Use Vapor Mode?",[732,760,761,767,773],{},[692,762,763,766],{},[156,764,765],{},"High-Performance Applications",": If your application requires high performance and low memory usage, Vapor Mode can be a good choice.",[692,768,769,772],{},[156,770,771],{},"Simple Components",": For simple components with minimal interactions and updates, Vapor Mode can provide a more efficient rendering process.",[692,774,775,778],{},[156,776,777],{},"Specific Use Cases",": If you have specific use cases where the benefits of Vapor Mode outweigh the limitations, it can be a valuable tool.",[176,780],{},[179,782,784],{"id":783},"limitations-and-considerations",[156,785,786],{},"Limitations and Considerations",[689,788,789,795,801,807],{},[692,790,791,794],{},[156,792,793],{},"Limited Features",": Vapor Mode may not support all the features and optimizations provided by the standard Virtual DOM and Vue’s built-in features. This can limit its applicability in certain scenarios.",[692,796,797,800],{},[156,798,799],{},"Compatibility",": Some third-party libraries and plugins that rely on the Virtual DOM may not work correctly with Vapor Mode.",[692,802,803,806],{},[156,804,805],{},"Debugging",": Debugging issues related to rendering can be more challenging in Vapor Mode due to the reduced abstractions and optimizations.",[692,808,809,812],{},[156,810,811],{},"Learning Curve",": Developers familiar with the standard Virtual DOM may need to adjust their understanding and approach when working with Vapor Mode.",[176,814],{},[152,816,818],{"id":817},"final-thoughts",[156,819,820],{},"Final Thoughts",[160,822,823],{},"In most cases, Default Mode will remain our bread and butter—it’s reliable, flexible, and easy to use. Vapor Mode, on the other hand, is an exciting tool to explore for niche scenarios where performance is non-negotiable.",[160,825,826,827,830,831,834,835,838],{},"In the case for our project in ",[217,828,829],{},"Sysarb"," we could use Vapor components for the ",[217,832,833],{},"graphs"," since they are somewhat animation/data heavy as data-flow changes overtime. And the rest of the views (in this case the ",[217,836,837],{},"Dashboard"," ) we can use the regular default modes.",[160,840,841],{},"Vapor Mode is still in the experimental phase and is not yet merged into vuejs/core. However, the outlook for a release in 2024 looks good.",[176,843],{},[160,845,846,849],{},[328,847,848],{},"Happy coding!"," 🥲",[380,851,852],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .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}",{"title":340,"searchDepth":361,"depth":361,"links":854},[855,867],{"id":154,"depth":361,"text":158,"children":856},[857,858,859,860,861,862,863,864,865,866],{"id":181,"depth":373,"text":184},{"id":294,"depth":373,"text":297},{"id":305,"depth":373,"text":308},{"id":321,"depth":373,"text":324},{"id":523,"depth":373,"text":526},{"id":670,"depth":373,"text":673},{"id":684,"depth":373,"text":687},{"id":721,"depth":373,"text":724},{"id":755,"depth":373,"text":758},{"id":783,"depth":373,"text":786},{"id":817,"depth":361,"text":820},"2024-11-01T00:00:00.000Z","*By Sean Erick C. Ramones, Vue SME | JavaScript/TypeScript SME*","md","https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",{},{"title":18,"description":869},"MgKWH7Nf8mOMxmLj6uLrXQMa0zHCsNXU38XCSmyKhfs",[876,877],{"title":14,"path":15,"stem":16,"description":869,"children":-1},{"title":22,"path":23,"stem":24,"description":869,"children":-1},1773209887646]