[{"data":1,"prerenderedAt":970},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002Fnuxt-317-data-fetching-improvements":142,"\u002Fblog\u002Fnuxt-317-data-fetching-improvements-surround":966},[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":78,"author":144,"body":148,"date":959,"description":960,"extension":961,"image":962,"meta":963,"minRead":222,"navigation":259,"path":79,"seo":964,"stem":80,"__hash__":965},"blog\u002Fblog\u002F019.nuxt-317-data-fetching-improvements.md",{"name":145,"avatar":146},"Sean Erick C. Ramones",{"src":147,"alt":145},"\u002Favatars\u002Fprofile-image-1.png",{"type":149,"value":150,"toc":948},"minimark",[151,156,172,319,325,328,331,335,348,429,433,436,438,442,449,545,549,552,554,558,565,628,635,637,641,644,661,665,668,670,674,734,736,740,888,890,894,932,934,938,944],[152,153,155],"h2",{"id":154},"_1-consistent-shared-data-across-components","1. Consistent Shared Data Across Components",[157,158,159,163,164,167,168,171],"p",{},[160,161,162],"code",{},"useAsyncData()"," and ",[160,165,166],{},"useFetch()"," now share the same reactive state (",[160,169,170],{},"ref",") across components when using the same key.",[173,174,179],"pre",{"className":175,"code":176,"language":177,"meta":178,"style":178},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- ComponentA.vue -->\n\u003Cscript setup>\nconst { data: users, pending } = useAsyncData('users', fetchUsers)\n\u003C\u002Fscript>\n\n\u003C!-- ComponentB.vue -->\n\u003Cscript setup>\nconst { data: users, status } = useAsyncData('users', fetchUsers)\n\u002F\u002F Updates in A reflect here in real-time\n\u003C\u002Fscript>\n","jsx","",[160,180,181,203,220,244,254,261,275,286,304,310],{"__ignoreMap":178},[182,183,186,190,194,197,200],"span",{"class":184,"line":185},"line",1,[182,187,189],{"class":188},"sMK4o","\u003C!--",[182,191,193],{"class":192},"sTEyZ"," ComponentA",[182,195,196],{"class":188},".",[182,198,199],{"class":192},"vue ",[182,201,202],{"class":188},"-->\n",[182,204,206,209,213,217],{"class":184,"line":205},2,[182,207,208],{"class":188},"\u003C",[182,210,212],{"class":211},"swJcz","script",[182,214,216],{"class":215},"spNyl"," setup",[182,218,219],{"class":188},">\n",[182,221,223,226,229,232,235,238,241],{"class":184,"line":222},3,[182,224,225],{"class":192},"const ",[182,227,228],{"class":188},"{",[182,230,231],{"class":192}," data: users",[182,233,234],{"class":188},",",[182,236,237],{"class":192}," pending ",[182,239,240],{"class":188},"}",[182,242,243],{"class":192}," = useAsyncData('users', fetchUsers)\n",[182,245,247,250,252],{"class":184,"line":246},4,[182,248,249],{"class":188},"\u003C\u002F",[182,251,212],{"class":211},[182,253,219],{"class":188},[182,255,257],{"class":184,"line":256},5,[182,258,260],{"emptyLinePlaceholder":259},true,"\n",[182,262,264,266,269,271,273],{"class":184,"line":263},6,[182,265,189],{"class":188},[182,267,268],{"class":192}," ComponentB",[182,270,196],{"class":188},[182,272,199],{"class":192},[182,274,202],{"class":188},[182,276,278,280,282,284],{"class":184,"line":277},7,[182,279,208],{"class":188},[182,281,212],{"class":211},[182,283,216],{"class":215},[182,285,219],{"class":188},[182,287,289,291,293,295,297,300,302],{"class":184,"line":288},8,[182,290,225],{"class":192},[182,292,228],{"class":188},[182,294,231],{"class":192},[182,296,234],{"class":188},[182,298,299],{"class":192}," status ",[182,301,240],{"class":188},[182,303,243],{"class":192},[182,305,307],{"class":184,"line":306},9,[182,308,309],{"class":192},"\u002F\u002F Updates in A reflect here in real-time\n",[182,311,313,315,317],{"class":184,"line":312},10,[182,314,249],{"class":188},[182,316,212],{"class":211},[182,318,219],{"class":188},[157,320,321],{},[322,323,324],"strong",{},"✅ Benefit:",[157,326,327],{},"Avoids duplicate API calls and ensures a consistent UI state across the app.",[329,330],"hr",{},[152,332,334],{"id":333},"_2-reactive-keys-for-dynamic-fetching","2. Reactive Keys for Dynamic Fetching",[157,336,337,338,340,341,343,344,347],{},"Keys passed to ",[160,339,162],{}," can now be ",[160,342,170],{},", ",[160,345,346],{},"computed",", or dynamic getters, triggering automatic refetching when dependencies change.",[173,349,351],{"className":175,"code":350,"language":177,"meta":178,"style":178},"\u003Cscript setup>\nconst userId = ref('123')\nconst { data: user } = useAsyncData(\n  computed(() => `user-${userId.value}`),\n  () => fetchUser(userId.value)\n)\n\nuserId.value = '456' \u002F\u002F Auto-fetches new data and cleans old entry\n\u003C\u002Fscript>\n",[160,352,353,363,368,382,402,407,412,416,421],{"__ignoreMap":178},[182,354,355,357,359,361],{"class":184,"line":185},[182,356,208],{"class":188},[182,358,212],{"class":211},[182,360,216],{"class":215},[182,362,219],{"class":188},[182,364,365],{"class":184,"line":205},[182,366,367],{"class":192},"const userId = ref('123')\n",[182,369,370,372,374,377,379],{"class":184,"line":222},[182,371,225],{"class":192},[182,373,228],{"class":188},[182,375,376],{"class":192}," data: user ",[182,378,240],{"class":188},[182,380,381],{"class":192}," = useAsyncData(\n",[182,383,384,387,389,392,394,397,399],{"class":184,"line":246},[182,385,386],{"class":192},"  computed(() => `user-$",[182,388,228],{"class":188},[182,390,391],{"class":192},"userId",[182,393,196],{"class":188},[182,395,396],{"class":192},"value",[182,398,240],{"class":188},[182,400,401],{"class":192},"`),\n",[182,403,404],{"class":184,"line":256},[182,405,406],{"class":192},"  () => fetchUser(userId.value)\n",[182,408,409],{"class":184,"line":263},[182,410,411],{"class":192},")\n",[182,413,414],{"class":184,"line":277},[182,415,260],{"emptyLinePlaceholder":259},[182,417,418],{"class":184,"line":288},[182,419,420],{"class":192},"userId.value = '456' \u002F\u002F Auto-fetches new data and cleans old entry\n",[182,422,423,425,427],{"class":184,"line":306},[182,424,249],{"class":188},[182,426,212],{"class":211},[182,428,219],{"class":188},[157,430,431],{},[322,432,324],{},[157,434,435],{},"Simplifies dynamic data workflows and improves memory cleanup.",[329,437],{},[152,439,441],{"id":440},"_3-optimized-refetching-with-watch-support","3. Optimized Refetching with Watch Support",[157,443,444,445,448],{},"When using the same key across components with dynamic inputs, Nuxt ensures only ",[322,446,447],{},"one fetch call"," is made and shared state is updated everywhere.",[173,450,452],{"className":175,"code":451,"language":177,"meta":178,"style":178},"\u003Cscript setup>\nconst page = ref(1)\nconst { data: users, pending } = useAsyncData(\n  'users',\n  () => $fetch(`\u002Fapi\u002Fusers?page=${page.value}`),\n  { watch: [() => page.value] }\n)\n\u003C\u002Fscript>\n",[160,453,454,464,469,485,490,508,533,537],{"__ignoreMap":178},[182,455,456,458,460,462],{"class":184,"line":185},[182,457,208],{"class":188},[182,459,212],{"class":211},[182,461,216],{"class":215},[182,463,219],{"class":188},[182,465,466],{"class":184,"line":205},[182,467,468],{"class":192},"const page = ref(1)\n",[182,470,471,473,475,477,479,481,483],{"class":184,"line":222},[182,472,225],{"class":192},[182,474,228],{"class":188},[182,476,231],{"class":192},[182,478,234],{"class":188},[182,480,237],{"class":192},[182,482,240],{"class":188},[182,484,381],{"class":192},[182,486,487],{"class":184,"line":246},[182,488,489],{"class":192},"  'users',\n",[182,491,492,495,497,500,502,504,506],{"class":184,"line":256},[182,493,494],{"class":192},"  () => $fetch(`\u002Fapi\u002Fusers?page=$",[182,496,228],{"class":188},[182,498,499],{"class":192},"page",[182,501,196],{"class":188},[182,503,396],{"class":192},[182,505,240],{"class":188},[182,507,401],{"class":192},[182,509,510,513,516,519,522,525,527,530],{"class":184,"line":263},[182,511,512],{"class":188},"  {",[182,514,515],{"class":192}," watch: [",[182,517,518],{"class":188},"()",[182,520,521],{"class":215}," =>",[182,523,524],{"class":192}," page",[182,526,196],{"class":188},[182,528,529],{"class":192},"value] ",[182,531,532],{"class":188},"}\n",[182,534,535],{"class":184,"line":277},[182,536,411],{"class":192},[182,538,539,541,543],{"class":184,"line":288},[182,540,249],{"class":188},[182,542,212],{"class":211},[182,544,219],{"class":188},[157,546,547],{},[322,548,324],{},[157,550,551],{},"Efficient updates across all components without redundant fetches.",[329,553],{},[152,555,557],{"id":556},"_4-granular-cache-control-experimental","4. Granular Cache Control (Experimental)",[157,559,560,561,564],{},"Nuxt introduces the ",[160,562,563],{},"experimental.granularCachedData"," flag for finer control over data caching and purging behavior.",[173,566,568],{"className":175,"code":567,"language":177,"meta":178,"style":178},"\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  experimental: {\n    granularCachedData: true\n  }\n})\n",[160,569,570,576,595,606,617,622],{"__ignoreMap":178},[182,571,572],{"class":184,"line":185},[182,573,575],{"class":574},"sHwdD","\u002F\u002F nuxt.config.ts\n",[182,577,578,582,585,589,592],{"class":184,"line":205},[182,579,581],{"class":580},"s7zQu","export",[182,583,584],{"class":580}," default",[182,586,588],{"class":587},"s2Zo4"," defineNuxtConfig",[182,590,591],{"class":192},"(",[182,593,594],{"class":188},"{\n",[182,596,597,600,603],{"class":184,"line":222},[182,598,599],{"class":211},"  experimental",[182,601,602],{"class":188},":",[182,604,605],{"class":188}," {\n",[182,607,608,611,613],{"class":184,"line":246},[182,609,610],{"class":211},"    granularCachedData",[182,612,602],{"class":188},[182,614,616],{"class":615},"sfNiH"," true\n",[182,618,619],{"class":184,"line":256},[182,620,621],{"class":188},"  }\n",[182,623,624,626],{"class":184,"line":263},[182,625,240],{"class":188},[182,627,411],{"class":192},[157,629,630,631,634],{},"You can also disable ",[160,632,633],{},"purgeCachedData"," to keep older caching behavior if needed.",[329,636],{},[152,638,640],{"id":639},"_5-better-developer-experience-warnings","5. Better Developer Experience & Warnings",[157,642,643],{},"New compile-time warnings for:",[645,646,647,651,658],"ul",{},[648,649,650],"li",{},"Missing root elements in SSR components",[648,652,653,654,657],{},"Duplicate ",[160,655,656],{},"definePageMeta"," calls",[648,659,660],{},"Overridden auto-import presets",[157,662,663],{},[322,664,324],{},[157,666,667],{},"Improves visibility and reduces runtime errors during development.",[329,669],{},[152,671,673],{"id":672},"summary-table","Summary Table",[675,676,677,690],"table",{},[678,679,680],"thead",{},[681,682,683,687],"tr",{},[684,685,686],"th",{},"Feature",[684,688,689],{},"Benefit",[691,692,693,702,710,718,726],"tbody",{},[681,694,695,699],{},[696,697,698],"td",{},"Shared Data Refs",[696,700,701],{},"Unified state across components",[681,703,704,707],{},[696,705,706],{},"Reactive Keys",[696,708,709],{},"Smarter dynamic fetches",[681,711,712,715],{},[696,713,714],{},"Deduped Requests",[696,716,717],{},"Prevents redundant API calls",[681,719,720,723],{},[696,721,722],{},"Granular Cache Control",[696,724,725],{},"More flexible fetch behavior",[681,727,728,731],{},[696,729,730],{},"DX Warnings",[696,732,733],{},"Surfaces issues early during build time",[329,735],{},[152,737,739],{"id":738},"migration-tips","Migration Tips",[741,742,743,789,817,862],"ol",{},[648,744,745,746],{},"Enable experimental caching (optional):",[173,747,749],{"className":175,"code":748,"language":177,"meta":178,"style":178},"export default defineNuxtConfig({\n  experimental: {\n    granularCachedData: true\n  }\n})\n",[160,750,751,763,771,779,783],{"__ignoreMap":178},[182,752,753,755,757,759,761],{"class":184,"line":185},[182,754,581],{"class":580},[182,756,584],{"class":580},[182,758,588],{"class":587},[182,760,591],{"class":192},[182,762,594],{"class":188},[182,764,765,767,769],{"class":184,"line":205},[182,766,599],{"class":211},[182,768,602],{"class":188},[182,770,605],{"class":188},[182,772,773,775,777],{"class":184,"line":222},[182,774,610],{"class":211},[182,776,602],{"class":188},[182,778,616],{"class":615},[182,780,781],{"class":184,"line":246},[182,782,621],{"class":188},[182,784,785,787],{"class":184,"line":256},[182,786,240],{"class":188},[182,788,411],{"class":192},[648,790,791,792,163,794,602,796],{},"Audit ",[160,793,162],{},[160,795,166],{},[645,797,798,801,810],{},[648,799,800],{},"Ensure unique keys.",[648,802,803,804,806,807,809],{},"Refactor with ",[160,805,170],{},"\u002F",[160,808,346],{}," keys if needed.",[648,811,812,813,816],{},"Add ",[160,814,815],{},"watch"," arrays to support dynamic inputs.",[648,818,819,820],{},"Opt-out of automatic purging:",[173,821,823],{"className":175,"code":822,"language":177,"meta":178,"style":178},"defineNuxtConfig({\n  experimental: {\n    purgeCachedData: false\n  }\n})\n",[160,824,825,834,842,852,856],{"__ignoreMap":178},[182,826,827,830,832],{"class":184,"line":185},[182,828,829],{"class":587},"defineNuxtConfig",[182,831,591],{"class":192},[182,833,594],{"class":188},[182,835,836,838,840],{"class":184,"line":205},[182,837,599],{"class":211},[182,839,602],{"class":188},[182,841,605],{"class":188},[182,843,844,847,849],{"class":184,"line":222},[182,845,846],{"class":211},"    purgeCachedData",[182,848,602],{"class":188},[182,850,851],{"class":615}," false\n",[182,853,854],{"class":184,"line":246},[182,855,621],{"class":188},[182,857,858,860],{"class":184,"line":256},[182,859,240],{"class":188},[182,861,411],{"class":192},[648,863,864,865],{},"Upgrade Nuxt:",[173,866,870],{"className":867,"code":868,"language":869,"meta":178,"style":178},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx nuxi@latest upgrade --dedupe\n","bash",[160,871,872],{"__ignoreMap":178},[182,873,874,878,882,885],{"class":184,"line":185},[182,875,877],{"class":876},"sBMFI","npx",[182,879,881],{"class":880},"sfazB"," nuxi@latest",[182,883,884],{"class":880}," upgrade",[182,886,887],{"class":880}," --dedupe\n",[329,889],{},[152,891,893],{"id":892},"trade-offs","Trade-offs",[675,895,896,906],{},[678,897,898],{},[681,899,900,903],{},[684,901,902],{},"Trade-off",[684,904,905],{},"Consideration",[691,907,908,916,924],{},[681,909,910,913],{},[696,911,912],{},"Additional config complexity",[696,914,915],{},"Some new caching flags to learn and test",[681,917,918,921],{},[696,919,920],{},"Potential early bugs",[696,922,923],{},"Recent rewrite may have edge cases under refinement",[681,925,926,929],{},[696,927,928],{},"Slight migration overhead",[696,930,931],{},"Dynamic keys may require key refactoring",[329,933],{},[152,935,937],{"id":936},"final-takeaway","Final Takeaway",[157,939,940,943],{},[322,941,942],{},"Nuxt 3.17"," introduces a smarter, more reactive async data layer with shared state, automatic deduplication, and better dynamic key support. It's a strong step forward for data handling in Nuxt apps and is recommended for teams working on scalable, performant Vue applications.",[945,946,947],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}",{"title":178,"searchDepth":205,"depth":205,"links":949},[950,951,952,953,954,955,956,957,958],{"id":154,"depth":205,"text":155},{"id":333,"depth":205,"text":334},{"id":440,"depth":205,"text":441},{"id":556,"depth":205,"text":557},{"id":639,"depth":205,"text":640},{"id":672,"depth":205,"text":673},{"id":738,"depth":205,"text":739},{"id":892,"depth":205,"text":893},{"id":936,"depth":205,"text":937},"2025-06-01","*By Sean Erick C. Ramones, Vue SME | JavaScript\u002FTypeScript SME*","md","https:\u002F\u002Fimages.pexels.com\u002Fphotos\u002F2425567\u002Fpexels-photo-2425567.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",{},{"title":78,"description":960},"4y8e07IQpqAeK0KdCwT6RJTF8JqC6JJyj---RJ4DV04",[967,969],{"title":74,"path":75,"stem":76,"description":968,"children":-1},"*By Sean Erick C. Ramones, Vue SME | JavaScript\u002FTypScript SME*",{"title":82,"path":83,"stem":84,"description":960,"children":-1},1779638276991]