[{"data":1,"prerenderedAt":6886},["ShallowReactive",2],{"navigation":3,"-docs-getting-started-data-fetching":1107,"-docs-getting-started-data-fetching-surround":6881},[4,1018],{"title":5,"titleTemplate":6,"icon":7,"path":8,"stem":9,"children":10,"page":108},"Docs",null,"i-lucide-bookmark","/docs","docs",[11,109,345,805,897,934,976],{"title":12,"titleTemplate":13,"icon":14,"path":15,"stem":16,"children":17,"page":108},"Get Started","%s · Get Started with Nuxt","i-lucide-rocket","/docs/getting-started","docs/1.getting-started",[18,23,28,33,38,43,48,53,58,63,68,73,78,83,88,93,98,103],{"title":19,"path":20,"stem":21,"titleTemplate":6,"icon":22},"Introduction","/docs/getting-started/introduction","docs/1.getting-started/01.introduction","i-lucide-info",{"title":24,"path":25,"stem":26,"titleTemplate":6,"icon":27},"Installation","/docs/getting-started/installation","docs/1.getting-started/02.installation","i-lucide-play",{"title":29,"path":30,"stem":31,"titleTemplate":6,"icon":32},"Configuration","/docs/getting-started/configuration","docs/1.getting-started/03.configuration","i-lucide-cog",{"title":34,"path":35,"stem":36,"titleTemplate":6,"icon":37},"Views","/docs/getting-started/views","docs/1.getting-started/04.views","i-lucide-panels-top-left",{"title":39,"path":40,"stem":41,"titleTemplate":6,"icon":42},"Assets","/docs/getting-started/assets","docs/1.getting-started/05.assets","i-lucide-image",{"title":44,"path":45,"stem":46,"titleTemplate":6,"icon":47},"Styling","/docs/getting-started/styling","docs/1.getting-started/06.styling","i-lucide-palette",{"title":49,"path":50,"stem":51,"titleTemplate":6,"icon":52},"Routing","/docs/getting-started/routing","docs/1.getting-started/07.routing","i-lucide-milestone",{"title":54,"path":55,"stem":56,"titleTemplate":6,"icon":57},"SEO and Meta","/docs/getting-started/seo-meta","docs/1.getting-started/08.seo-meta","i-lucide-file-search",{"title":59,"path":60,"stem":61,"titleTemplate":6,"icon":62},"Transitions","/docs/getting-started/transitions","docs/1.getting-started/09.transitions","i-lucide-toggle-right",{"title":64,"path":65,"stem":66,"titleTemplate":6,"icon":67},"Data Fetching","/docs/getting-started/data-fetching","docs/1.getting-started/10.data-fetching","i-lucide-cable",{"title":69,"path":70,"stem":71,"titleTemplate":6,"icon":72},"State Management","/docs/getting-started/state-management","docs/1.getting-started/11.state-management","i-lucide-database",{"title":74,"path":75,"stem":76,"titleTemplate":6,"icon":77},"Error Handling","/docs/getting-started/error-handling","docs/1.getting-started/12.error-handling","i-lucide-bug-off",{"title":79,"path":80,"stem":81,"titleTemplate":6,"icon":82},"Server","/docs/getting-started/server","docs/1.getting-started/13.server","i-lucide-pc-case",{"title":84,"path":85,"stem":86,"titleTemplate":6,"icon":87},"Layers","/docs/getting-started/layers","docs/1.getting-started/14.layers","i-lucide-layers",{"title":89,"path":90,"stem":91,"titleTemplate":6,"icon":92},"Prerendering","/docs/getting-started/prerendering","docs/1.getting-started/15.prerendering","i-lucide-file-code-2",{"title":94,"path":95,"stem":96,"titleTemplate":6,"icon":97},"Deployment","/docs/getting-started/deployment","docs/1.getting-started/16.deployment","i-lucide-cloud",{"title":99,"path":100,"stem":101,"titleTemplate":6,"icon":102},"Testing","/docs/getting-started/testing","docs/1.getting-started/17.testing","i-lucide-circle-check",{"title":104,"path":105,"stem":106,"titleTemplate":6,"icon":107},"Upgrade Guide","/docs/getting-started/upgrade","docs/1.getting-started/18.upgrade","i-lucide-circle-arrow-up",false,{"title":110,"titleTemplate":6,"icon":111,"path":112,"stem":113,"children":114,"page":108},"Guide","i-lucide-book-open","/docs/guide","docs/2.guide",[115,158,271,322],{"title":116,"titleTemplate":117,"icon":118,"path":119,"stem":120,"children":121,"page":108},"Key Concepts","%s · Nuxt Concepts","i-lucide-medal","/docs/guide/concepts","docs/2.guide/1.concepts",[122,126,130,134,138,142,146,150,154],{"title":123,"path":124,"stem":125,"titleTemplate":6},"Auto-imports","/docs/guide/concepts/auto-imports","docs/2.guide/1.concepts/1.auto-imports",{"title":127,"path":128,"stem":129,"titleTemplate":6},"Nuxt Lifecycle","/docs/guide/concepts/nuxt-lifecycle","docs/2.guide/1.concepts/10.nuxt-lifecycle",{"title":131,"path":132,"stem":133,"titleTemplate":6},"Vue.js Development","/docs/guide/concepts/vuejs-development","docs/2.guide/1.concepts/2.vuejs-development",{"title":135,"path":136,"stem":137,"titleTemplate":6},"Rendering Modes","/docs/guide/concepts/rendering","docs/2.guide/1.concepts/3.rendering",{"title":139,"path":140,"stem":141,"titleTemplate":6},"Server Engine","/docs/guide/concepts/server-engine","docs/2.guide/1.concepts/4.server-engine",{"title":143,"path":144,"stem":145,"titleTemplate":6},"Modules","/docs/guide/concepts/modules","docs/2.guide/1.concepts/5.modules",{"title":147,"path":148,"stem":149,"titleTemplate":6},"ES Modules","/docs/guide/concepts/esm","docs/2.guide/1.concepts/7.esm",{"title":151,"path":152,"stem":153,"titleTemplate":6},"TypeScript","/docs/guide/concepts/typescript","docs/2.guide/1.concepts/8.typescript",{"title":155,"path":156,"stem":157,"titleTemplate":6},"Code Style","/docs/guide/concepts/code-style","docs/2.guide/1.concepts/9.code-style",{"title":159,"titleTemplate":160,"icon":161,"path":162,"stem":163,"children":164,"page":108},"Directory Structure","%s · Nuxt Directory Structure","i-lucide-folders","/docs/guide/directory-structure","docs/2.guide/2.directory-structure",[165,170,174,178,182,186,190,194,198,202,206,210,214,218,222,226,230,235,239,243,247,251,255,259,263,267],{"title":166,"path":167,"stem":168,"titleTemplate":6,"icon":169},".nuxt","/docs/guide/directory-structure/nuxt","docs/2.guide/2.directory-structure/0.nuxt","i-lucide-folder",{"title":171,"path":172,"stem":173,"titleTemplate":6,"icon":169},".output","/docs/guide/directory-structure/output","docs/2.guide/2.directory-structure/0.output",{"title":175,"path":176,"stem":177,"titleTemplate":6,"icon":169},"assets","/docs/guide/directory-structure/assets","docs/2.guide/2.directory-structure/1.assets",{"title":179,"path":180,"stem":181,"titleTemplate":6,"icon":169},"components","/docs/guide/directory-structure/components","docs/2.guide/2.directory-structure/1.components",{"title":183,"path":184,"stem":185,"titleTemplate":6,"icon":169},"composables","/docs/guide/directory-structure/composables","docs/2.guide/2.directory-structure/1.composables",{"title":187,"path":188,"stem":189,"titleTemplate":6,"icon":169},"content","/docs/guide/directory-structure/content","docs/2.guide/2.directory-structure/1.content",{"title":191,"path":192,"stem":193,"titleTemplate":6,"icon":169},"layouts","/docs/guide/directory-structure/layouts","docs/2.guide/2.directory-structure/1.layouts",{"title":195,"path":196,"stem":197,"titleTemplate":6,"icon":169},"middleware","/docs/guide/directory-structure/middleware","docs/2.guide/2.directory-structure/1.middleware",{"title":199,"path":200,"stem":201,"titleTemplate":6,"icon":169},"modules","/docs/guide/directory-structure/modules","docs/2.guide/2.directory-structure/1.modules",{"title":203,"path":204,"stem":205,"titleTemplate":6,"icon":169},"node_modules","/docs/guide/directory-structure/node_modules","docs/2.guide/2.directory-structure/1.node_modules",{"title":207,"path":208,"stem":209,"titleTemplate":6,"icon":169},"pages","/docs/guide/directory-structure/pages","docs/2.guide/2.directory-structure/1.pages",{"title":211,"path":212,"stem":213,"titleTemplate":6,"icon":169},"plugins","/docs/guide/directory-structure/plugins","docs/2.guide/2.directory-structure/1.plugins",{"title":215,"path":216,"stem":217,"titleTemplate":6,"icon":169},"public","/docs/guide/directory-structure/public","docs/2.guide/2.directory-structure/1.public",{"title":219,"path":220,"stem":221,"titleTemplate":6,"icon":169},"server","/docs/guide/directory-structure/server","docs/2.guide/2.directory-structure/1.server",{"title":223,"path":224,"stem":225,"titleTemplate":6,"icon":169},"shared","/docs/guide/directory-structure/shared","docs/2.guide/2.directory-structure/1.shared",{"title":227,"path":228,"stem":229,"titleTemplate":6,"icon":169},"utils","/docs/guide/directory-structure/utils","docs/2.guide/2.directory-structure/1.utils",{"title":231,"path":232,"stem":233,"titleTemplate":6,"icon":234},".env","/docs/guide/directory-structure/env","docs/2.guide/2.directory-structure/2.env","i-lucide-file",{"title":236,"path":237,"stem":238,"titleTemplate":6,"icon":234},".gitignore","/docs/guide/directory-structure/gitignore","docs/2.guide/2.directory-structure/2.gitignore",{"title":240,"path":241,"stem":242,"titleTemplate":6,"icon":234},".nuxtignore","/docs/guide/directory-structure/nuxtignore","docs/2.guide/2.directory-structure/2.nuxtignore",{"title":244,"path":245,"stem":246,"titleTemplate":6,"icon":234},".nuxtrc","/docs/guide/directory-structure/nuxtrc","docs/2.guide/2.directory-structure/2.nuxtrc",{"title":248,"path":249,"stem":250,"titleTemplate":6,"icon":234},"app.vue","/docs/guide/directory-structure/app","docs/2.guide/2.directory-structure/3.app",{"title":252,"path":253,"stem":254,"titleTemplate":6,"icon":234},"app.config.ts","/docs/guide/directory-structure/app-config","docs/2.guide/2.directory-structure/3.app-config",{"title":256,"path":257,"stem":258,"titleTemplate":6,"icon":234},"error.vue","/docs/guide/directory-structure/error","docs/2.guide/2.directory-structure/3.error",{"title":260,"path":261,"stem":262,"titleTemplate":6,"icon":234},"nuxt.config.ts","/docs/guide/directory-structure/nuxt-config","docs/2.guide/2.directory-structure/3.nuxt-config",{"title":264,"path":265,"stem":266,"titleTemplate":6,"icon":234},"package.json","/docs/guide/directory-structure/package","docs/2.guide/2.directory-structure/3.package",{"title":268,"path":269,"stem":270,"titleTemplate":6,"icon":234},"tsconfig.json","/docs/guide/directory-structure/tsconfig","docs/2.guide/2.directory-structure/3.tsconfig",{"title":272,"titleTemplate":273,"icon":274,"path":275,"stem":276,"children":277,"page":108},"Going Further","%s · Nuxt Advanced","i-lucide-star","/docs/guide/going-further","docs/2.guide/3.going-further",[278,282,286,290,294,298,302,306,310,314,318],{"title":279,"path":280,"stem":281,"titleTemplate":6},"Experimental Features","/docs/guide/going-further/experimental-features","docs/2.guide/3.going-further/1.experimental-features",{"title":283,"path":284,"stem":285,"titleTemplate":6},"Features","/docs/guide/going-further/features","docs/2.guide/3.going-further/1.features",{"title":287,"path":288,"stem":289,"titleTemplate":6},"How Nuxt Works?","/docs/guide/going-further/internals","docs/2.guide/3.going-further/1.internals",{"title":291,"path":292,"stem":293,"titleTemplate":6},"Runtime Config","/docs/guide/going-further/runtime-config","docs/2.guide/3.going-further/10.runtime-config",{"title":295,"path":296,"stem":297,"titleTemplate":6},"Nightly Release Channel","/docs/guide/going-further/nightly-release-channel","docs/2.guide/3.going-further/11.nightly-release-channel",{"title":299,"path":300,"stem":301,"titleTemplate":6},"Lifecycle Hooks","/docs/guide/going-further/hooks","docs/2.guide/3.going-further/2.hooks",{"title":303,"path":304,"stem":305,"titleTemplate":6},"Module Author Guide","/docs/guide/going-further/modules","docs/2.guide/3.going-further/3.modules",{"title":307,"path":308,"stem":309,"titleTemplate":6},"Nuxt Kit","/docs/guide/going-further/kit","docs/2.guide/3.going-further/4.kit",{"title":311,"path":312,"stem":313,"titleTemplate":6},"NuxtApp","/docs/guide/going-further/nuxt-app","docs/2.guide/3.going-further/6.nuxt-app",{"title":315,"path":316,"stem":317,"titleTemplate":6},"Authoring Nuxt Layers","/docs/guide/going-further/layers","docs/2.guide/3.going-further/7.layers",{"title":319,"path":320,"stem":321,"titleTemplate":6},"Debugging","/docs/guide/going-further/debugging","docs/2.guide/3.going-further/9.debugging",{"title":323,"titleTemplate":324,"icon":325,"path":326,"stem":327,"children":328,"page":108},"Recipes","%s · Recipes","i-lucide-cooking-pot","/docs/guide/recipes","docs/2.guide/4.recipes",[329,333,337,341],{"title":330,"path":331,"stem":332,"titleTemplate":6},"Custom Routing","/docs/guide/recipes/custom-routing","docs/2.guide/4.recipes/1.custom-routing",{"title":334,"path":335,"stem":336,"titleTemplate":6},"Vite Plugins","/docs/guide/recipes/vite-plugin","docs/2.guide/4.recipes/2.vite-plugin",{"title":338,"path":339,"stem":340,"titleTemplate":6},"Custom useFetch","/docs/guide/recipes/custom-usefetch","docs/2.guide/4.recipes/3.custom-usefetch",{"title":342,"path":343,"stem":344,"titleTemplate":6},"Sessions and Authentication","/docs/guide/recipes/sessions-and-authentication","docs/2.guide/4.recipes/4.sessions-and-authentication",{"title":346,"titleTemplate":347,"icon":348,"path":349,"stem":350,"children":351,"page":108},"API","%s · Nuxt API","i-lucide-code-xml","/docs/api","docs/3.api",[352,416,539,654,721,787,800],{"title":353,"titleTemplate":354,"icon":355,"path":356,"stem":357,"children":358,"page":108},"Components","%s · Nuxt Components","i-lucide-box","/docs/api/components","docs/3.api/1.components",[359,363,367,371,375,379,384,388,392,396,400,404,408,412],{"title":360,"path":361,"stem":362,"titleTemplate":6},"\u003CClientOnly>","/docs/api/components/client-only","docs/3.api/1.components/1.client-only",{"title":364,"path":365,"stem":366,"titleTemplate":6},"\u003CDevOnly>","/docs/api/components/dev-only","docs/3.api/1.components/1.dev-only",{"title":368,"path":369,"stem":370,"titleTemplate":6},"\u003CNuxtClientFallback>","/docs/api/components/nuxt-client-fallback","docs/3.api/1.components/1.nuxt-client-fallback",{"title":372,"path":373,"stem":374,"titleTemplate":6},"\u003CNuxtPicture>","/docs/api/components/nuxt-picture","docs/3.api/1.components/10.nuxt-picture",{"title":376,"path":377,"stem":378,"titleTemplate":6},"\u003CTeleport>","/docs/api/components/teleports","docs/3.api/1.components/11.teleports",{"title":380,"path":381,"stem":382,"titleTemplate":6,"badge":383},"\u003CNuxtRouteAnnouncer>","/docs/api/components/nuxt-route-announcer","docs/3.api/1.components/12.nuxt-route-announcer","New",{"title":385,"path":386,"stem":387,"titleTemplate":6},"\u003CNuxtPage>","/docs/api/components/nuxt-page","docs/3.api/1.components/2.nuxt-page",{"title":389,"path":390,"stem":391,"titleTemplate":6},"\u003CNuxtLayout>","/docs/api/components/nuxt-layout","docs/3.api/1.components/3.nuxt-layout",{"title":393,"path":394,"stem":395,"titleTemplate":6},"\u003CNuxtLink>","/docs/api/components/nuxt-link","docs/3.api/1.components/4.nuxt-link",{"title":397,"path":398,"stem":399,"titleTemplate":6},"\u003CNuxtLoadingIndicator>","/docs/api/components/nuxt-loading-indicator","docs/3.api/1.components/5.nuxt-loading-indicator",{"title":401,"path":402,"stem":403,"titleTemplate":6},"\u003CNuxtErrorBoundary>","/docs/api/components/nuxt-error-boundary","docs/3.api/1.components/6.nuxt-error-boundary",{"title":405,"path":406,"stem":407,"titleTemplate":6},"\u003CNuxtWelcome>","/docs/api/components/nuxt-welcome","docs/3.api/1.components/7.nuxt-welcome",{"title":409,"path":410,"stem":411,"titleTemplate":6},"\u003CNuxtIsland>","/docs/api/components/nuxt-island","docs/3.api/1.components/8.nuxt-island",{"title":413,"path":414,"stem":415,"titleTemplate":6},"\u003CNuxtImg>","/docs/api/components/nuxt-img","docs/3.api/1.components/9.nuxt-img",{"title":417,"titleTemplate":418,"icon":419,"path":420,"stem":421,"children":422,"page":108},"Composables","%s · Nuxt Composables","i-lucide-arrow-left-right","/docs/api/composables","docs/3.api/2.composables",[423,427,431,435,439,443,447,451,455,459,463,467,471,475,479,483,487,491,495,499,503,507,511,515,519,523,527,531,535],{"title":424,"path":425,"stem":426,"titleTemplate":6},"onPrehydrate","/docs/api/composables/on-prehydrate","docs/3.api/2.composables/on-prehydrate",{"title":428,"path":429,"stem":430,"titleTemplate":6},"useAppConfig","/docs/api/composables/use-app-config","docs/3.api/2.composables/use-app-config",{"title":432,"path":433,"stem":434,"titleTemplate":6},"useAsyncData","/docs/api/composables/use-async-data","docs/3.api/2.composables/use-async-data",{"title":436,"path":437,"stem":438,"titleTemplate":6},"useCookie","/docs/api/composables/use-cookie","docs/3.api/2.composables/use-cookie",{"title":440,"path":441,"stem":442,"titleTemplate":6},"useError","/docs/api/composables/use-error","docs/3.api/2.composables/use-error",{"title":444,"path":445,"stem":446,"titleTemplate":6},"useFetch","/docs/api/composables/use-fetch","docs/3.api/2.composables/use-fetch",{"title":448,"path":449,"stem":450,"titleTemplate":6},"useHead","/docs/api/composables/use-head","docs/3.api/2.composables/use-head",{"title":452,"path":453,"stem":454,"titleTemplate":6},"useHeadSafe","/docs/api/composables/use-head-safe","docs/3.api/2.composables/use-head-safe",{"title":456,"path":457,"stem":458,"titleTemplate":6},"useHydration","/docs/api/composables/use-hydration","docs/3.api/2.composables/use-hydration",{"title":460,"path":461,"stem":462,"titleTemplate":6},"useLazyAsyncData","/docs/api/composables/use-lazy-async-data","docs/3.api/2.composables/use-lazy-async-data",{"title":464,"path":465,"stem":466,"titleTemplate":6},"useLazyFetch","/docs/api/composables/use-lazy-fetch","docs/3.api/2.composables/use-lazy-fetch",{"title":468,"path":469,"stem":470,"titleTemplate":6},"useLoadingIndicator","/docs/api/composables/use-loading-indicator","docs/3.api/2.composables/use-loading-indicator",{"title":472,"path":473,"stem":474,"titleTemplate":6},"useNuxtApp","/docs/api/composables/use-nuxt-app","docs/3.api/2.composables/use-nuxt-app",{"title":476,"path":477,"stem":478,"titleTemplate":6},"useNuxtData","/docs/api/composables/use-nuxt-data","docs/3.api/2.composables/use-nuxt-data",{"title":480,"path":481,"stem":482,"titleTemplate":6},"usePreviewMode","/docs/api/composables/use-preview-mode","docs/3.api/2.composables/use-preview-mode",{"title":484,"path":485,"stem":486,"titleTemplate":6},"useRequestEvent","/docs/api/composables/use-request-event","docs/3.api/2.composables/use-request-event",{"title":488,"path":489,"stem":490,"titleTemplate":6},"useRequestFetch","/docs/api/composables/use-request-fetch","docs/3.api/2.composables/use-request-fetch",{"title":492,"path":493,"stem":494,"titleTemplate":6},"useRequestHeader","/docs/api/composables/use-request-header","docs/3.api/2.composables/use-request-header",{"title":496,"path":497,"stem":498,"titleTemplate":6},"useRequestHeaders","/docs/api/composables/use-request-headers","docs/3.api/2.composables/use-request-headers",{"title":500,"path":501,"stem":502,"titleTemplate":6},"useRequestURL","/docs/api/composables/use-request-url","docs/3.api/2.composables/use-request-url",{"title":504,"path":505,"stem":506,"titleTemplate":6},"useResponseHeader","/docs/api/composables/use-response-header","docs/3.api/2.composables/use-response-header",{"title":508,"path":509,"stem":510,"titleTemplate":6},"useRoute","/docs/api/composables/use-route","docs/3.api/2.composables/use-route",{"title":512,"path":513,"stem":514,"titleTemplate":6,"badge":383},"useRouteAnnouncer","/docs/api/composables/use-route-announcer","docs/3.api/2.composables/use-route-announcer",{"title":516,"path":517,"stem":518,"titleTemplate":6},"useRouter","/docs/api/composables/use-router","docs/3.api/2.composables/use-router",{"title":520,"path":521,"stem":522,"titleTemplate":6},"useRuntimeConfig","/docs/api/composables/use-runtime-config","docs/3.api/2.composables/use-runtime-config",{"title":524,"path":525,"stem":526,"titleTemplate":6},"useRuntimeHook","/docs/api/composables/use-runtime-hook","docs/3.api/2.composables/use-runtime-hook",{"title":528,"path":529,"stem":530,"titleTemplate":6},"useSeoMeta","/docs/api/composables/use-seo-meta","docs/3.api/2.composables/use-seo-meta",{"title":532,"path":533,"stem":534,"titleTemplate":6},"useServerSeoMeta","/docs/api/composables/use-server-seo-meta","docs/3.api/2.composables/use-server-seo-meta",{"title":536,"path":537,"stem":538,"titleTemplate":6},"useState","/docs/api/composables/use-state","docs/3.api/2.composables/use-state",{"title":540,"titleTemplate":541,"icon":542,"path":543,"stem":544,"children":545,"page":108},"Utils","%s · Nuxt Utils","i-lucide-square-function","/docs/api/utils","docs/3.api/3.utils",[546,550,554,558,562,566,570,574,578,582,586,590,594,598,602,606,610,614,618,622,626,630,634,638,642,646,650],{"title":547,"path":548,"stem":549,"titleTemplate":6},"$fetch","/docs/api/utils/dollarfetch","docs/3.api/3.utils/$fetch",{"title":551,"path":552,"stem":553,"titleTemplate":6},"abortNavigation","/docs/api/utils/abort-navigation","docs/3.api/3.utils/abort-navigation",{"title":555,"path":556,"stem":557,"titleTemplate":6},"addRouteMiddleware","/docs/api/utils/add-route-middleware","docs/3.api/3.utils/add-route-middleware",{"title":559,"path":560,"stem":561,"titleTemplate":6,"badge":383},"callOnce","/docs/api/utils/call-once","docs/3.api/3.utils/call-once",{"title":563,"path":564,"stem":565,"titleTemplate":6},"clearError","/docs/api/utils/clear-error","docs/3.api/3.utils/clear-error",{"title":567,"path":568,"stem":569,"titleTemplate":6},"clearNuxtData","/docs/api/utils/clear-nuxt-data","docs/3.api/3.utils/clear-nuxt-data",{"title":571,"path":572,"stem":573,"titleTemplate":6},"clearNuxtState","/docs/api/utils/clear-nuxt-state","docs/3.api/3.utils/clear-nuxt-state",{"title":575,"path":576,"stem":577,"titleTemplate":6},"createError","/docs/api/utils/create-error","docs/3.api/3.utils/create-error",{"title":579,"path":580,"stem":581,"titleTemplate":6},"defineNuxtComponent","/docs/api/utils/define-nuxt-component","docs/3.api/3.utils/define-nuxt-component",{"title":583,"path":584,"stem":585,"titleTemplate":6},"defineNuxtRouteMiddleware","/docs/api/utils/define-nuxt-route-middleware","docs/3.api/3.utils/define-nuxt-route-middleware",{"title":587,"path":588,"stem":589,"titleTemplate":6},"definePageMeta","/docs/api/utils/define-page-meta","docs/3.api/3.utils/define-page-meta",{"title":591,"path":592,"stem":593,"titleTemplate":6},"defineRouteRules","/docs/api/utils/define-route-rules","docs/3.api/3.utils/define-route-rules",{"title":595,"path":596,"stem":597,"titleTemplate":6},"navigateTo","/docs/api/utils/navigate-to","docs/3.api/3.utils/navigate-to",{"title":599,"path":600,"stem":601,"titleTemplate":6},"onBeforeRouteLeave","/docs/api/utils/on-before-route-leave","docs/3.api/3.utils/on-before-route-leave",{"title":603,"path":604,"stem":605,"titleTemplate":6},"onBeforeRouteUpdate","/docs/api/utils/on-before-route-update","docs/3.api/3.utils/on-before-route-update",{"title":607,"path":608,"stem":609,"titleTemplate":6},"onNuxtReady","/docs/api/utils/on-nuxt-ready","docs/3.api/3.utils/on-nuxt-ready",{"title":611,"path":612,"stem":613,"titleTemplate":6},"prefetchComponents","/docs/api/utils/prefetch-components","docs/3.api/3.utils/prefetch-components",{"title":615,"path":616,"stem":617,"titleTemplate":6},"preloadComponents","/docs/api/utils/preload-components","docs/3.api/3.utils/preload-components",{"title":619,"path":620,"stem":621,"titleTemplate":6},"preloadRouteComponents","/docs/api/utils/preload-route-components","docs/3.api/3.utils/preload-route-components",{"title":623,"path":624,"stem":625,"titleTemplate":6},"prerenderRoutes","/docs/api/utils/prerender-routes","docs/3.api/3.utils/prerender-routes",{"title":627,"path":628,"stem":629,"titleTemplate":6,"badge":383},"refreshCookie","/docs/api/utils/refresh-cookie","docs/3.api/3.utils/refresh-cookie",{"title":631,"path":632,"stem":633,"titleTemplate":6},"refreshNuxtData","/docs/api/utils/refresh-nuxt-data","docs/3.api/3.utils/refresh-nuxt-data",{"title":635,"path":636,"stem":637,"titleTemplate":6},"reloadNuxtApp","/docs/api/utils/reload-nuxt-app","docs/3.api/3.utils/reload-nuxt-app",{"title":639,"path":640,"stem":641,"titleTemplate":6},"setPageLayout","/docs/api/utils/set-page-layout","docs/3.api/3.utils/set-page-layout",{"title":643,"path":644,"stem":645,"titleTemplate":6},"setResponseStatus","/docs/api/utils/set-response-status","docs/3.api/3.utils/set-response-status",{"title":647,"path":648,"stem":649,"titleTemplate":6},"showError","/docs/api/utils/show-error","docs/3.api/3.utils/show-error",{"title":651,"path":652,"stem":653,"titleTemplate":6},"updateAppConfig","/docs/api/utils/update-app-config","docs/3.api/3.utils/update-app-config",{"title":655,"titleTemplate":656,"icon":657,"path":658,"stem":659,"children":660,"page":108},"Commands","%s · Nuxt Commands","i-lucide-square-terminal","/docs/api/commands","docs/3.api/4.commands",[661,665,669,673,677,681,685,689,693,697,701,705,709,713,717],{"title":662,"path":663,"stem":664,"titleTemplate":6},"nuxi add","/docs/api/commands/add","docs/3.api/4.commands/add",{"title":666,"path":667,"stem":668,"titleTemplate":6},"nuxi analyze","/docs/api/commands/analyze","docs/3.api/4.commands/analyze",{"title":670,"path":671,"stem":672,"titleTemplate":6},"nuxi build","/docs/api/commands/build","docs/3.api/4.commands/build",{"title":674,"path":675,"stem":676,"titleTemplate":6},"nuxi build-module","/docs/api/commands/build-module","docs/3.api/4.commands/build-module",{"title":678,"path":679,"stem":680,"titleTemplate":6},"nuxi cleanup","/docs/api/commands/cleanup","docs/3.api/4.commands/cleanup",{"title":682,"path":683,"stem":684,"titleTemplate":6},"nuxi dev","/docs/api/commands/dev","docs/3.api/4.commands/dev",{"title":686,"path":687,"stem":688,"titleTemplate":6},"nuxi devtools","/docs/api/commands/devtools","docs/3.api/4.commands/devtools",{"title":690,"path":691,"stem":692,"titleTemplate":6},"nuxi generate","/docs/api/commands/generate","docs/3.api/4.commands/generate",{"title":694,"path":695,"stem":696,"titleTemplate":6},"nuxi info","/docs/api/commands/info","docs/3.api/4.commands/info",{"title":698,"path":699,"stem":700,"titleTemplate":6},"nuxi init","/docs/api/commands/init","docs/3.api/4.commands/init",{"title":702,"path":703,"stem":704,"titleTemplate":6},"nuxi module","/docs/api/commands/module","docs/3.api/4.commands/module",{"title":706,"path":707,"stem":708,"titleTemplate":6},"nuxi prepare","/docs/api/commands/prepare","docs/3.api/4.commands/prepare",{"title":710,"path":711,"stem":712,"titleTemplate":6},"nuxi preview","/docs/api/commands/preview","docs/3.api/4.commands/preview",{"title":714,"path":715,"stem":716,"titleTemplate":6},"nuxi typecheck","/docs/api/commands/typecheck","docs/3.api/4.commands/typecheck",{"title":718,"path":719,"stem":720,"titleTemplate":6},"nuxi upgrade","/docs/api/commands/upgrade","docs/3.api/4.commands/upgrade",{"title":307,"titleTemplate":722,"icon":723,"path":724,"stem":725,"children":726,"page":108},"%s · Nuxt Kit","i-lucide-package","/docs/api/kit","docs/3.api/5.kit",[727,730,733,737,741,745,749,753,757,761,765,768,771,775,779,783],{"title":143,"path":728,"stem":729,"titleTemplate":6},"/docs/api/kit/modules","docs/3.api/5.kit/1.modules",{"title":291,"path":731,"stem":732,"titleTemplate":6},"/docs/api/kit/runtime-config","docs/3.api/5.kit/10.runtime-config",{"title":734,"path":735,"stem":736,"titleTemplate":6},"Templates","/docs/api/kit/templates","docs/3.api/5.kit/10.templates",{"title":738,"path":739,"stem":740,"titleTemplate":6},"Nitro","/docs/api/kit/nitro","docs/3.api/5.kit/11.nitro",{"title":742,"path":743,"stem":744,"titleTemplate":6},"Resolving","/docs/api/kit/resolving","docs/3.api/5.kit/12.resolving",{"title":746,"path":747,"stem":748,"titleTemplate":6},"Logging","/docs/api/kit/logging","docs/3.api/5.kit/13.logging",{"title":750,"path":751,"stem":752,"titleTemplate":6},"Builder","/docs/api/kit/builder","docs/3.api/5.kit/14.builder",{"title":754,"path":755,"stem":756,"titleTemplate":6},"Examples","/docs/api/kit/examples","docs/3.api/5.kit/15.examples",{"title":758,"path":759,"stem":760,"titleTemplate":6},"Programmatic Usage","/docs/api/kit/programmatic","docs/3.api/5.kit/2.programmatic",{"title":762,"path":763,"stem":764,"titleTemplate":6},"Compatibility","/docs/api/kit/compatibility","docs/3.api/5.kit/3.compatibility",{"title":123,"path":766,"stem":767,"titleTemplate":6},"/docs/api/kit/autoimports","docs/3.api/5.kit/4.autoimports",{"title":353,"path":769,"stem":770,"titleTemplate":6},"/docs/api/kit/components","docs/3.api/5.kit/5.components",{"title":772,"path":773,"stem":774,"titleTemplate":6},"Context","/docs/api/kit/context","docs/3.api/5.kit/6.context",{"title":776,"path":777,"stem":778,"titleTemplate":6},"Pages","/docs/api/kit/pages","docs/3.api/5.kit/7.pages",{"title":780,"path":781,"stem":782,"titleTemplate":6},"Layout","/docs/api/kit/layout","docs/3.api/5.kit/8.layout",{"title":784,"path":785,"stem":786,"titleTemplate":6},"Plugins","/docs/api/kit/plugins","docs/3.api/5.kit/9.plugins",{"title":788,"titleTemplate":6,"icon":789,"path":790,"stem":791,"children":792,"page":108},"Advanced","i-lucide-brain","/docs/api/advanced","docs/3.api/6.advanced",[793,796],{"title":299,"path":794,"stem":795,"titleTemplate":6},"/docs/api/advanced/hooks","docs/3.api/6.advanced/1.hooks",{"title":797,"path":798,"stem":799,"titleTemplate":6},"Import meta","/docs/api/advanced/import-meta","docs/3.api/6.advanced/2.import-meta",{"title":801,"path":802,"stem":803,"titleTemplate":804,"icon":32},"Nuxt Configuration","/docs/api/nuxt-config","docs/3.api/6.nuxt-config","%s",{"title":754,"titleTemplate":806,"icon":807,"path":808,"stem":809,"children":810,"page":108},"%s · Nuxt Examples","i-lucide-app-window-mac","/docs/examples","docs/4.examples",[811,815,837,852,888],{"title":812,"path":813,"stem":814,"titleTemplate":6},"Hello World","/docs/examples/hello-world","docs/4.examples/0.hello-world",{"title":283,"path":816,"stem":817,"children":818,"page":108},"/docs/examples/features","docs/4.examples/1.features",[819,823,826,829,833],{"title":820,"path":821,"stem":822,"titleTemplate":6},"Auto Imports","/docs/examples/features/auto-imports","docs/4.examples/1.features/1.auto-imports",{"title":64,"path":824,"stem":825,"titleTemplate":6},"/docs/examples/features/data-fetching","docs/4.examples/1.features/2.data-fetching",{"title":69,"path":827,"stem":828,"titleTemplate":6},"/docs/examples/features/state-management","docs/4.examples/1.features/3.state-management",{"title":830,"path":831,"stem":832,"titleTemplate":6},"Meta Tags","/docs/examples/features/meta-tags","docs/4.examples/1.features/4.meta-tags",{"title":834,"path":835,"stem":836,"titleTemplate":6},"Layouts","/docs/examples/features/layouts","docs/4.examples/1.features/5.layouts",{"title":49,"path":838,"stem":839,"children":840,"page":108},"/docs/examples/routing","docs/4.examples/2.routing",[841,845,848],{"title":842,"path":843,"stem":844,"titleTemplate":6},"Middleware","/docs/examples/routing/middleware","docs/4.examples/2.routing/middleware",{"title":776,"path":846,"stem":847,"titleTemplate":6},"/docs/examples/routing/pages","docs/4.examples/2.routing/pages",{"title":849,"path":850,"stem":851,"titleTemplate":6},"Universal Router","/docs/examples/routing/universal-router","docs/4.examples/2.routing/universal-router",{"title":788,"path":853,"stem":854,"children":855,"page":108},"/docs/examples/advanced","docs/4.examples/4.advanced",[856,859,862,866,870,874,878,881,884],{"title":84,"path":857,"stem":858,"titleTemplate":6},"/docs/examples/advanced/config-extends","docs/4.examples/4.advanced/config-extends",{"title":74,"path":860,"stem":861,"titleTemplate":6},"/docs/examples/advanced/error-handling","docs/4.examples/4.advanced/error-handling",{"title":863,"path":864,"stem":865,"titleTemplate":6},"JSX / TSX","/docs/examples/advanced/jsx","docs/4.examples/4.advanced/jsx",{"title":867,"path":868,"stem":869,"titleTemplate":6},"Locale","/docs/examples/advanced/locale","docs/4.examples/4.advanced/locale",{"title":871,"path":872,"stem":873,"titleTemplate":6},"Module Extend Pages","/docs/examples/advanced/module-extend-pages","docs/4.examples/4.advanced/module-extend-pages",{"title":875,"path":876,"stem":877,"titleTemplate":6},"Teleport","/docs/examples/advanced/teleport","docs/4.examples/4.advanced/teleport",{"title":99,"path":879,"stem":880,"titleTemplate":6},"/docs/examples/advanced/testing","docs/4.examples/4.advanced/testing",{"title":436,"path":882,"stem":883,"titleTemplate":6},"/docs/examples/advanced/use-cookie","docs/4.examples/4.advanced/use-cookie",{"title":885,"path":886,"stem":887,"titleTemplate":6},"Use Custom Fetch Composable","/docs/examples/advanced/use-custom-fetch-composable","docs/4.examples/4.advanced/use-custom-fetch-composable",{"title":889,"path":890,"stem":891,"children":892,"page":108},"Experimental","/docs/examples/experimental","docs/4.examples/7.experimental",[893],{"title":894,"path":895,"stem":896,"titleTemplate":6},"WASM","/docs/examples/experimental/wasm","docs/4.examples/7.experimental/wasm",{"title":898,"titleTemplate":899,"icon":900,"path":901,"stem":902,"children":903,"page":108},"Community","%s · Nuxt Community","i-lucide-messages-square","/docs/community","docs/5.community",[904,909,914,919,924,929],{"title":905,"path":906,"stem":907,"titleTemplate":6,"icon":908},"Getting Help","/docs/community/getting-help","docs/5.community/2.getting-help","i-lucide-life-buoy",{"title":910,"path":911,"stem":912,"titleTemplate":6,"icon":913},"Reporting Bugs","/docs/community/reporting-bugs","docs/5.community/3.reporting-bugs","i-lucide-bug",{"title":915,"path":916,"stem":917,"titleTemplate":6,"icon":918},"Contribution","/docs/community/contribution","docs/5.community/4.contribution","i-lucide-git-pull-request",{"title":920,"path":921,"stem":922,"titleTemplate":6,"icon":923},"Framework","/docs/community/framework-contribution","docs/5.community/5.framework-contribution","i-lucide-github",{"title":925,"path":926,"stem":927,"titleTemplate":6,"icon":928},"Roadmap","/docs/community/roadmap","docs/5.community/6.roadmap","i-lucide-map",{"title":930,"path":931,"stem":932,"titleTemplate":6,"icon":933},"Releases","/docs/community/changelog","docs/5.community/7.changelog","i-lucide-bell-dot",{"title":935,"titleTemplate":936,"icon":937,"path":938,"stem":939,"children":940,"page":108},"Migrate to Nuxt Bridge","Migrate to Nuxt Bridge: %s","i-lucide-ship","/docs/bridge","docs/6.bridge",[941,945,948,951,955,959,963,966,969,972],{"title":942,"path":943,"stem":944,"titleTemplate":6},"Overview","/docs/bridge/overview","docs/6.bridge/1.overview",{"title":29,"path":946,"stem":947,"titleTemplate":6},"/docs/bridge/configuration","docs/6.bridge/10.configuration",{"title":151,"path":949,"stem":950,"titleTemplate":6},"/docs/bridge/typescript","docs/6.bridge/2.typescript",{"title":952,"path":953,"stem":954,"titleTemplate":6},"Legacy Composition API","/docs/bridge/bridge-composition-api","docs/6.bridge/3.bridge-composition-api",{"title":956,"path":957,"stem":958,"titleTemplate":6},"Plugins and Middleware","/docs/bridge/plugins-and-middleware","docs/6.bridge/4.plugins-and-middleware",{"title":960,"path":961,"stem":962,"titleTemplate":6},"New Composition API","/docs/bridge/nuxt3-compatible-api","docs/6.bridge/5.nuxt3-compatible-api",{"title":830,"path":964,"stem":965,"titleTemplate":6},"/docs/bridge/meta","docs/6.bridge/6.meta",{"title":291,"path":967,"stem":968,"titleTemplate":6},"/docs/bridge/runtime-config","docs/6.bridge/7.runtime-config",{"title":738,"path":970,"stem":971,"titleTemplate":6},"/docs/bridge/nitro","docs/6.bridge/8.nitro",{"title":973,"path":974,"stem":975,"titleTemplate":6},"Vite","/docs/bridge/vite","docs/6.bridge/9.vite",{"title":977,"titleTemplate":978,"icon":107,"path":979,"stem":980,"children":981,"page":108},"Migrate to Nuxt 3","Migrate to Nuxt 3: %s","/docs/migration","docs/7.migration",[982,985,989,992,995,998,1001,1004,1007,1011,1015],{"title":942,"path":983,"stem":984,"titleTemplate":6},"/docs/migration/overview","docs/7.migration/1.overview",{"title":986,"path":987,"stem":988,"titleTemplate":6},"Build Tooling","/docs/migration/bundling","docs/7.migration/10.bundling",{"title":79,"path":990,"stem":991,"titleTemplate":6},"/docs/migration/server","docs/7.migration/11.server",{"title":29,"path":993,"stem":994,"titleTemplate":6},"/docs/migration/configuration","docs/7.migration/2.configuration",{"title":143,"path":996,"stem":997,"titleTemplate":6},"/docs/migration/module-authors","docs/7.migration/20.module-authors",{"title":820,"path":999,"stem":1000,"titleTemplate":6},"/docs/migration/auto-imports","docs/7.migration/3.auto-imports",{"title":830,"path":1002,"stem":1003,"titleTemplate":6},"/docs/migration/meta","docs/7.migration/4.meta",{"title":956,"path":1005,"stem":1006,"titleTemplate":6},"/docs/migration/plugins-and-middleware","docs/7.migration/5.plugins-and-middleware",{"title":1008,"path":1009,"stem":1010,"titleTemplate":6},"Pages and Layouts","/docs/migration/pages-and-layouts","docs/7.migration/6.pages-and-layouts",{"title":1012,"path":1013,"stem":1014,"titleTemplate":6},"Component Options","/docs/migration/component-options","docs/7.migration/7.component-options",{"title":291,"path":1016,"stem":1017,"titleTemplate":6},"/docs/migration/runtime-config","docs/7.migration/8.runtime-config",{"title":1019,"path":1020,"stem":1021,"children":1022,"page":108},"Blog","/blog","blog",[1023,1027,1031,1035,1039,1043,1047,1051,1055,1059,1063,1067,1071,1075,1079,1083,1087,1091,1095,1099,1103],{"title":1024,"path":1025,"stem":1026},"Announcing 3.0","/blog/v3","blog/1.v3",{"title":1028,"path":1029,"stem":1030},"Nuxt 3.3","/blog/v3-3","blog/10.v3-3",{"title":1032,"path":1033,"stem":1034},"Nuxt 3.4","/blog/v3-4","blog/11.v3-4",{"title":1036,"path":1037,"stem":1038},"Nuxt 3.5","/blog/v3-5","blog/12.v3-5",{"title":1040,"path":1041,"stem":1042},"Nuxt 3.6","/blog/v3-6","blog/13.v3-6",{"title":1044,"path":1045,"stem":1046},"Nuxt on the Edge","/blog/nuxt-on-the-edge","blog/14.nuxt-on-the-edge",{"title":1048,"path":1049,"stem":1050},"Nuxt DevTools v1.0","/blog/nuxt-devtools-v1-0","blog/18.nuxt-devtools-v1-0",{"title":1052,"path":1053,"stem":1054},"Nuxt: A vision for 2023","/blog/vision-2023","blog/2.vision-2023",{"title":1056,"path":1057,"stem":1058},"The Evolution of Shiki v1.0","/blog/shiki-v1","blog/21.shiki-v1",{"title":1060,"path":1061,"stem":1062},"Refreshed Nuxt ESLint Integrations","/blog/eslint-module","blog/24.eslint-module",{"title":1064,"path":1065,"stem":1066},"Introducing Nuxt Scripts","/blog/nuxt-scripts","blog/26.nuxt-scripts",{"title":1068,"path":1069,"stem":1070},"Introducing Nuxt Icon v1","/blog/nuxt-icon-v1-0","blog/29.nuxt-icon-v1-0",{"title":1072,"path":1073,"stem":1074},"Introducing Nuxt DevTools","/blog/introducing-nuxt-devtools","blog/3.introducing-nuxt-devtools",{"title":1076,"path":1077,"stem":1078},"Announcing Nuxt 3 Release Candidate","/blog/nuxt3-rc","blog/3.nuxt3-rc",{"title":1080,"path":1081,"stem":1082},"Nuxt 2 End-of-Life (EOL)","/blog/nuxt2-eol","blog/4.nuxt2-eol",{"title":1084,"path":1085,"stem":1086},"Introducing Nuxt 3 Beta","/blog/nuxt3-beta","blog/4.nuxt3-beta",{"title":1088,"path":1089,"stem":1090},"Going Full Static","/blog/going-full-static","blog/5.going-full-static",{"title":1092,"path":1093,"stem":1094},"Introducing Smart Prefetching","/blog/introducing-smart-prefetching","blog/6.introducing-smart-prefetching",{"title":1096,"path":1097,"stem":1098},"Understanding how fetch works in Nuxt 2.12","/blog/understanding-how-fetch-works-in-nuxt-2-12","blog/7.understanding-how-fetch-works-in-nuxt-2-12",{"title":1100,"path":1101,"stem":1102},"Nuxt 2 Static Improvements","/blog/nuxt-static-improvements","blog/8.nuxt-static-improvements",{"title":1104,"path":1105,"stem":1106},"Nuxt 2: From Terminal to Browser","/blog/nuxtjs-from-terminal-to-browser","blog/9.nuxtjs-from-terminal-to-browser",{"id":1108,"title":64,"body":1109,"description":6875,"extension":6876,"links":6,"meta":6877,"navigation":6878,"path":65,"seo":6879,"stem":66,"titleTemplate":6,"__hash__":6880},"docs/docs/1.getting-started/10.data-fetching.md",{"type":1110,"value":1111,"toc":6843},"minimal",[1112,1129,1132,1167,1175,1184,1193,1205,1218,1235,1570,1579,1584,1595,1606,1611,1623,1738,1765,1773,1777,1792,1856,1893,1910,2018,2028,2073,2078,2088,2192,2203,2214,2216,2219,2224,2229,2252,2262,2275,2408,2444,2581,2589,2776,2879,2885,2889,2896,2965,2983,2989,3011,3015,3026,3030,3039,3234,3244,3310,3316,3322,3326,3336,3342,3448,3459,3463,3469,3641,3648,3770,3779,3783,3788,3799,3825,3834,3838,3847,4005,4017,4030,4033,4041,4184,4187,4197,4310,4317,4430,4438,4442,4445,4558,4567,4574,4932,4939,4942,4951,4960,5201,5207,5230,5234,5243,5249,5262,5266,5269,5492,5624,5628,5638,5747,5758,5760,5764,5800,5808,5822,5826,5843,5853,5857,5897,5962,5966,5976,6146,6246,6250,6259,6268,6413,6550,6553,6557,6577,6580,6839],[1113,1114,1115,1116,1119,1120,1125,1126,1128],"p",{},"Nuxt comes with two composables and a built-in library to perform data-fetching in browser or server environments: ",[1117,1118,444],"code",{},", ",[1121,1122,1123],"a",{"href":433},[1117,1124,432],{}," and ",[1117,1127,547],{},".",[1113,1130,1131],{},"In a nutshell:",[1133,1134,1135,1143,1157],"ul",{},[1136,1137,1138,1142],"li",{},[1121,1139,1140],{"href":548},[1117,1141,547],{}," is the simplest way to make a network request.",[1136,1144,1145,1149,1150,1152,1153,1128],{},[1121,1146,1147],{"href":445},[1117,1148,444],{}," is wrapper around ",[1117,1151,547],{}," that fetches data only once in ",[1121,1154,1156],{"href":1155},"/docs/guide/concepts/rendering#universal-rendering","universal rendering",[1136,1158,1159,1163,1164,1166],{},[1121,1160,1161],{"href":433},[1117,1162,432],{}," is similar to ",[1117,1165,444],{}," but offers more fine-grained control.",[1113,1168,1169,1170,1125,1172,1174],{},"Both ",[1117,1171,444],{},[1117,1173,432],{}," share a common set of options and patterns that we will detail in the last sections.",[1176,1177,1179,1180,1125,1182],"h2",{"id":1178},"the-need-for-usefetch-and-useasyncdata","The need for ",[1117,1181,444],{},[1117,1183,432],{},[1113,1185,1186,1187,1192],{},"Nuxt is a framework which can run isomorphic (or universal) code in both server and client environments. If the ",[1121,1188,1189,1191],{"href":548},[1117,1190,547],{}," function"," is used to perform data fetching in the setup function of a Vue component, this may cause data to be fetched twice, once on the server (to render the HTML) and once again on the client (when the HTML is hydrated). This can cause hydration issues, increase the time to interactivity and cause unpredictable behavior.",[1113,1194,1195,1196,1125,1200,1204],{},"The ",[1121,1197,1198],{"href":445},[1117,1199,444],{},[1121,1201,1202],{"href":433},[1117,1203,432],{}," composables solve this problem by ensuring that if an API call is made on the server, the data is forwarded to the client in the payload.",[1113,1206,1207,1208,1214,1215,1128],{},"The payload is a JavaScript object accessible through ",[1121,1209,1211],{"href":1210},"/docs/api/composables/use-nuxt-app#payload",[1117,1212,1213],{},"useNuxtApp().payload",". It is used on the client to avoid refetching the same data when the code is executed in the browser ",[1121,1216,1217],{"href":1155},"during hydration",[1219,1220,1221],"tip",{},[1113,1222,1223,1224,1230,1231,1128],{},"Use the ",[1121,1225,1229],{"href":1226,"rel":1227},"https://devtools.nuxt.com",[1228],"nofollow","Nuxt DevTools"," to inspect this data in the ",[1232,1233,1234],"strong",{},"Payload tab",[1236,1237,1242],"pre",{"className":1238,"code":1239,"filename":248,"language":1240,"meta":1241,"style":1241},"language-vue shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","\u003Cscript setup lang=\"ts\">\nconst { data } = await useFetch('/api/data')\n\nasync function handleFormSubmit() {\n  const res = await $fetch('/api/submit', {\n    method: 'POST',\n    body: {\n      // My form data\n    }\n  })\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv v-if=\"data == null\">\n    No data\n  \u003C/div>\n  \u003Cdiv v-else>\n    \u003Cform @submit=\"handleFormSubmit\">\n      \u003C!-- form input tags -->\n    \u003C/form>\n  \u003C/div>\n\u003C/template>\n","vue","",[1117,1243,1244,1279,1320,1327,1344,1374,1394,1404,1411,1417,1425,1431,1441,1446,1456,1482,1488,1498,1510,1536,1542,1552,1561],{"__ignoreMap":1241},[1245,1246,1249,1253,1257,1261,1264,1267,1270,1274,1276],"span",{"class":1247,"line":1248},"line",1,[1245,1250,1252],{"class":1251},"sYp4K","\u003C",[1245,1254,1256],{"class":1255},"sQ5dg","script",[1245,1258,1260],{"class":1259},"sRBFq"," setup",[1245,1262,1263],{"class":1259}," lang",[1245,1265,1266],{"class":1251},"=",[1245,1268,1269],{"class":1251},"\"",[1245,1271,1273],{"class":1272},"s5UST","ts",[1245,1275,1269],{"class":1251},[1245,1277,1278],{"class":1251},">\n",[1245,1280,1282,1285,1288,1292,1295,1298,1302,1306,1309,1312,1315,1317],{"class":1247,"line":1281},2,[1245,1283,1284],{"class":1259},"const",[1245,1286,1287],{"class":1251}," {",[1245,1289,1291],{"class":1290},"spdxX"," data ",[1245,1293,1294],{"class":1251},"}",[1245,1296,1297],{"class":1251}," =",[1245,1299,1301],{"class":1300},"sFVN2"," await",[1245,1303,1305],{"class":1304},"szd4z"," useFetch",[1245,1307,1308],{"class":1290},"(",[1245,1310,1311],{"class":1251},"'",[1245,1313,1314],{"class":1272},"/api/data",[1245,1316,1311],{"class":1251},[1245,1318,1319],{"class":1290},")\n",[1245,1321,1323],{"class":1247,"line":1322},3,[1245,1324,1326],{"emptyLinePlaceholder":1325},true,"\n",[1245,1328,1330,1333,1335,1338,1341],{"class":1247,"line":1329},4,[1245,1331,1332],{"class":1259},"async",[1245,1334,1191],{"class":1259},[1245,1336,1337],{"class":1304}," handleFormSubmit",[1245,1339,1340],{"class":1251},"()",[1245,1342,1343],{"class":1251}," {\n",[1245,1345,1347,1350,1353,1355,1357,1360,1362,1364,1367,1369,1372],{"class":1247,"line":1346},5,[1245,1348,1349],{"class":1259},"  const",[1245,1351,1352],{"class":1290}," res",[1245,1354,1297],{"class":1251},[1245,1356,1301],{"class":1300},[1245,1358,1359],{"class":1304}," $fetch",[1245,1361,1308],{"class":1255},[1245,1363,1311],{"class":1251},[1245,1365,1366],{"class":1272},"/api/submit",[1245,1368,1311],{"class":1251},[1245,1370,1371],{"class":1251},",",[1245,1373,1343],{"class":1251},[1245,1375,1377,1380,1383,1386,1389,1391],{"class":1247,"line":1376},6,[1245,1378,1379],{"class":1255},"    method",[1245,1381,1382],{"class":1251},":",[1245,1384,1385],{"class":1251}," '",[1245,1387,1388],{"class":1272},"POST",[1245,1390,1311],{"class":1251},[1245,1392,1393],{"class":1251},",\n",[1245,1395,1397,1400,1402],{"class":1247,"line":1396},7,[1245,1398,1399],{"class":1255},"    body",[1245,1401,1382],{"class":1251},[1245,1403,1343],{"class":1251},[1245,1405,1407],{"class":1247,"line":1406},8,[1245,1408,1410],{"class":1409},"svXlt","      // My form data\n",[1245,1412,1414],{"class":1247,"line":1413},9,[1245,1415,1416],{"class":1251},"    }\n",[1245,1418,1420,1423],{"class":1247,"line":1419},10,[1245,1421,1422],{"class":1251},"  }",[1245,1424,1319],{"class":1255},[1245,1426,1428],{"class":1247,"line":1427},11,[1245,1429,1430],{"class":1251},"}\n",[1245,1432,1434,1437,1439],{"class":1247,"line":1433},12,[1245,1435,1436],{"class":1251},"\u003C/",[1245,1438,1256],{"class":1255},[1245,1440,1278],{"class":1251},[1245,1442,1444],{"class":1247,"line":1443},13,[1245,1445,1326],{"emptyLinePlaceholder":1325},[1245,1447,1449,1451,1454],{"class":1247,"line":1448},14,[1245,1450,1252],{"class":1251},[1245,1452,1453],{"class":1255},"template",[1245,1455,1278],{"class":1251},[1245,1457,1459,1462,1465,1468,1470,1472,1475,1478,1480],{"class":1247,"line":1458},15,[1245,1460,1461],{"class":1251},"  \u003C",[1245,1463,1464],{"class":1255},"div",[1245,1466,1467],{"class":1300}," v-if",[1245,1469,1266],{"class":1251},[1245,1471,1269],{"class":1251},[1245,1473,1474],{"class":1290},"data",[1245,1476,1477],{"class":1251}," == null",[1245,1479,1269],{"class":1251},[1245,1481,1278],{"class":1251},[1245,1483,1485],{"class":1247,"line":1484},16,[1245,1486,1487],{"class":1290},"    No data\n",[1245,1489,1491,1494,1496],{"class":1247,"line":1490},17,[1245,1492,1493],{"class":1251},"  \u003C/",[1245,1495,1464],{"class":1255},[1245,1497,1278],{"class":1251},[1245,1499,1501,1503,1505,1508],{"class":1247,"line":1500},18,[1245,1502,1461],{"class":1251},[1245,1504,1464],{"class":1255},[1245,1506,1507],{"class":1300}," v-else",[1245,1509,1278],{"class":1251},[1245,1511,1513,1516,1519,1522,1525,1527,1529,1532,1534],{"class":1247,"line":1512},19,[1245,1514,1515],{"class":1251},"    \u003C",[1245,1517,1518],{"class":1255},"form",[1245,1520,1521],{"class":1251}," @",[1245,1523,1524],{"class":1259},"submit",[1245,1526,1266],{"class":1251},[1245,1528,1269],{"class":1251},[1245,1530,1531],{"class":1290},"handleFormSubmit",[1245,1533,1269],{"class":1251},[1245,1535,1278],{"class":1251},[1245,1537,1539],{"class":1247,"line":1538},20,[1245,1540,1541],{"class":1409},"      \u003C!-- form input tags -->\n",[1245,1543,1545,1548,1550],{"class":1247,"line":1544},21,[1245,1546,1547],{"class":1251},"    \u003C/",[1245,1549,1518],{"class":1255},[1245,1551,1278],{"class":1251},[1245,1553,1555,1557,1559],{"class":1247,"line":1554},22,[1245,1556,1493],{"class":1251},[1245,1558,1464],{"class":1255},[1245,1560,1278],{"class":1251},[1245,1562,1564,1566,1568],{"class":1247,"line":1563},23,[1245,1565,1436],{"class":1251},[1245,1567,1453],{"class":1255},[1245,1569,1278],{"class":1251},[1113,1571,1572,1573,1575,1576,1578],{},"In the example above, ",[1117,1574,444],{}," would make sure that the request would occur in the server and is properly forwarded to the browser. ",[1117,1577,547],{}," has no such mechanism and is a better option to use when the request is solely made from the browser.",[1580,1581,1583],"h3",{"id":1582},"suspense","Suspense",[1113,1585,1586,1587,1594],{},"Nuxt uses Vue’s ",[1121,1588,1591],{"href":1589,"rel":1590},"https://vuejs.org/guide/built-ins/suspense",[1228],[1117,1592,1593],{},"\u003CSuspense>"," component under the hood to prevent navigation before every async data is available to the view. The data fetching composables can help you leverage this feature and use what suits best on a per-call basis.",[1596,1597,1598],"note",{},[1113,1599,1600,1601,1605],{},"You can add the ",[1121,1602,1603],{"href":398},[1117,1604,397],{}," to add a progress bar between page navigations.",[1176,1607,1609],{"id":1608},"fetch",[1117,1610,547],{},[1113,1612,1613,1614,1619,1620,1622],{},"Nuxt includes the ",[1121,1615,1618],{"href":1616,"rel":1617},"https://github.com/unjs/ofetch",[1228],"ofetch"," library, and is auto-imported as the ",[1117,1621,547],{}," alias globally across your application.",[1236,1624,1628],{"className":1238,"code":1625,"filename":1626,"language":1240,"meta":1627,"style":1241},"\u003Cscript setup lang=\"ts\">\nasync function addTodo() {\n  const todo = await $fetch('/api/todos', {\n    method: 'POST',\n    body: {\n      // My todo data\n    }\n  })\n}\n\u003C/script>\n","pages/todos.vue","twoslash",[1117,1629,1630,1650,1663,1689,1703,1711,1716,1720,1726,1730],{"__ignoreMap":1241},[1245,1631,1632,1634,1636,1638,1640,1642,1644,1646,1648],{"class":1247,"line":1248},[1245,1633,1252],{"class":1251},[1245,1635,1256],{"class":1255},[1245,1637,1260],{"class":1259},[1245,1639,1263],{"class":1259},[1245,1641,1266],{"class":1251},[1245,1643,1269],{"class":1251},[1245,1645,1273],{"class":1272},[1245,1647,1269],{"class":1251},[1245,1649,1278],{"class":1251},[1245,1651,1652,1654,1656,1659,1661],{"class":1247,"line":1281},[1245,1653,1332],{"class":1259},[1245,1655,1191],{"class":1259},[1245,1657,1658],{"class":1304}," addTodo",[1245,1660,1340],{"class":1251},[1245,1662,1343],{"class":1251},[1245,1664,1665,1667,1670,1672,1674,1676,1678,1680,1683,1685,1687],{"class":1247,"line":1322},[1245,1666,1349],{"class":1259},[1245,1668,1669],{"class":1290}," todo",[1245,1671,1297],{"class":1251},[1245,1673,1301],{"class":1300},[1245,1675,1359],{"class":1304},[1245,1677,1308],{"class":1255},[1245,1679,1311],{"class":1251},[1245,1681,1682],{"class":1272},"/api/todos",[1245,1684,1311],{"class":1251},[1245,1686,1371],{"class":1251},[1245,1688,1343],{"class":1251},[1245,1690,1691,1693,1695,1697,1699,1701],{"class":1247,"line":1329},[1245,1692,1379],{"class":1255},[1245,1694,1382],{"class":1251},[1245,1696,1385],{"class":1251},[1245,1698,1388],{"class":1272},[1245,1700,1311],{"class":1251},[1245,1702,1393],{"class":1251},[1245,1704,1705,1707,1709],{"class":1247,"line":1346},[1245,1706,1399],{"class":1255},[1245,1708,1382],{"class":1251},[1245,1710,1343],{"class":1251},[1245,1712,1713],{"class":1247,"line":1376},[1245,1714,1715],{"class":1409},"      // My todo data\n",[1245,1717,1718],{"class":1247,"line":1396},[1245,1719,1416],{"class":1251},[1245,1721,1722,1724],{"class":1247,"line":1406},[1245,1723,1422],{"class":1251},[1245,1725,1319],{"class":1255},[1245,1727,1728],{"class":1247,"line":1413},[1245,1729,1430],{"class":1251},[1245,1731,1732,1734,1736],{"class":1247,"line":1419},[1245,1733,1436],{"class":1251},[1245,1735,1256],{"class":1255},[1245,1737,1278],{"class":1251},[1739,1740,1741],"warning",{},[1113,1742,1743,1744,1746,1747,1751,1752,1755,1756,1758,1759,1764],{},"Beware that using only ",[1117,1745,547],{}," will not provide ",[1121,1748,1750],{"href":1749},"#the-need-for-usefetch-and-useasyncdata","network calls de-duplication and navigation prevention",". ",[1753,1754],"br",{},"\nIt is recommended to use ",[1117,1757,547],{}," for client-side interactions (event based) or combined with ",[1121,1760,1762],{"href":1761},"#useasyncdata",[1117,1763,432],{}," when fetching the initial component data.",[1766,1767,1768],"read-more",{"to":548},[1113,1769,1770,1771,1128],{},"Read more about ",[1117,1772,547],{},[1580,1774,1776],{"id":1775},"pass-client-headers-to-the-api","Pass Client Headers to the API",[1113,1778,1779,1780,1782,1783,1787,1788,1791],{},"When calling ",[1117,1781,444],{}," on the server, Nuxt will use ",[1121,1784,1785],{"href":489},[1117,1786,488],{}," to proxy client headers and cookies (with the exception of headers not meant to be forwarded, like ",[1117,1789,1790],{},"host",").",[1236,1793,1795],{"className":1238,"code":1794,"language":1240,"meta":1241,"style":1241},"\u003Cscript setup lang=\"ts\">\nconst { data } = await useFetch('/api/echo');\n\u003C/script>\n",[1117,1796,1797,1817,1848],{"__ignoreMap":1241},[1245,1798,1799,1801,1803,1805,1807,1809,1811,1813,1815],{"class":1247,"line":1248},[1245,1800,1252],{"class":1251},[1245,1802,1256],{"class":1255},[1245,1804,1260],{"class":1259},[1245,1806,1263],{"class":1259},[1245,1808,1266],{"class":1251},[1245,1810,1269],{"class":1251},[1245,1812,1273],{"class":1272},[1245,1814,1269],{"class":1251},[1245,1816,1278],{"class":1251},[1245,1818,1819,1821,1823,1825,1827,1829,1831,1833,1835,1837,1840,1842,1845],{"class":1247,"line":1281},[1245,1820,1284],{"class":1259},[1245,1822,1287],{"class":1251},[1245,1824,1291],{"class":1290},[1245,1826,1294],{"class":1251},[1245,1828,1297],{"class":1251},[1245,1830,1301],{"class":1300},[1245,1832,1305],{"class":1304},[1245,1834,1308],{"class":1290},[1245,1836,1311],{"class":1251},[1245,1838,1839],{"class":1272},"/api/echo",[1245,1841,1311],{"class":1251},[1245,1843,1844],{"class":1290},")",[1245,1846,1847],{"class":1251},";\n",[1245,1849,1850,1852,1854],{"class":1247,"line":1322},[1245,1851,1436],{"class":1251},[1245,1853,1256],{"class":1255},[1245,1855,1278],{"class":1251},[1236,1857,1860],{"className":1858,"code":1859,"language":1273,"meta":1241,"style":1241},"language-ts shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","// /api/echo.ts\nexport default defineEventHandler(event => parseCookies(event))\n",[1117,1861,1862,1867],{"__ignoreMap":1241},[1245,1863,1864],{"class":1247,"line":1248},[1245,1865,1866],{"class":1409},"// /api/echo.ts\n",[1245,1868,1869,1872,1875,1878,1880,1884,1887,1890],{"class":1247,"line":1281},[1245,1870,1871],{"class":1300},"export",[1245,1873,1874],{"class":1300}," default",[1245,1876,1877],{"class":1304}," defineEventHandler",[1245,1879,1308],{"class":1290},[1245,1881,1883],{"class":1882},"ssYd4","event",[1245,1885,1886],{"class":1259}," =>",[1245,1888,1889],{"class":1304}," parseCookies",[1245,1891,1892],{"class":1290},"(event))\n",[1113,1894,1895,1896,1900,1901,1903,1904,1907,1908,1128],{},"Alternatively, the example below shows how to use ",[1121,1897,1898],{"href":497},[1117,1899,496],{}," to access and send cookies to the API from a server-side request (originating on the client). Using an isomorphic ",[1117,1902,547],{}," call, we ensure that the API endpoint has access to the same ",[1117,1905,1906],{},"cookie"," header originally sent by the user's browser. This is only necessary if you aren't using ",[1117,1909,444],{},[1236,1911,1913],{"className":1238,"code":1912,"language":1240,"meta":1241,"style":1241},"\u003Cscript setup lang=\"ts\">\nconst headers = useRequestHeaders(['cookie'])\n\nasync function getCurrentUser() {\n  return await $fetch('/api/me', { headers })\n}\n\u003C/script>\n",[1117,1914,1915,1935,1959,1963,1976,2006,2010],{"__ignoreMap":1241},[1245,1916,1917,1919,1921,1923,1925,1927,1929,1931,1933],{"class":1247,"line":1248},[1245,1918,1252],{"class":1251},[1245,1920,1256],{"class":1255},[1245,1922,1260],{"class":1259},[1245,1924,1263],{"class":1259},[1245,1926,1266],{"class":1251},[1245,1928,1269],{"class":1251},[1245,1930,1273],{"class":1272},[1245,1932,1269],{"class":1251},[1245,1934,1278],{"class":1251},[1245,1936,1937,1939,1942,1944,1947,1950,1952,1954,1956],{"class":1247,"line":1281},[1245,1938,1284],{"class":1259},[1245,1940,1941],{"class":1290}," headers ",[1245,1943,1266],{"class":1251},[1245,1945,1946],{"class":1304}," useRequestHeaders",[1245,1948,1949],{"class":1290},"([",[1245,1951,1311],{"class":1251},[1245,1953,1906],{"class":1272},[1245,1955,1311],{"class":1251},[1245,1957,1958],{"class":1290},"])\n",[1245,1960,1961],{"class":1247,"line":1322},[1245,1962,1326],{"emptyLinePlaceholder":1325},[1245,1964,1965,1967,1969,1972,1974],{"class":1247,"line":1329},[1245,1966,1332],{"class":1259},[1245,1968,1191],{"class":1259},[1245,1970,1971],{"class":1304}," getCurrentUser",[1245,1973,1340],{"class":1251},[1245,1975,1343],{"class":1251},[1245,1977,1978,1981,1983,1985,1987,1989,1992,1994,1996,1998,2001,2004],{"class":1247,"line":1346},[1245,1979,1980],{"class":1300},"  return",[1245,1982,1301],{"class":1300},[1245,1984,1359],{"class":1304},[1245,1986,1308],{"class":1255},[1245,1988,1311],{"class":1251},[1245,1990,1991],{"class":1272},"/api/me",[1245,1993,1311],{"class":1251},[1245,1995,1371],{"class":1251},[1245,1997,1287],{"class":1251},[1245,1999,2000],{"class":1290}," headers",[1245,2002,2003],{"class":1251}," }",[1245,2005,1319],{"class":1255},[1245,2007,2008],{"class":1247,"line":1376},[1245,2009,1430],{"class":1251},[1245,2011,2012,2014,2016],{"class":1247,"line":1396},[1245,2013,1436],{"class":1251},[1245,2015,1256],{"class":1255},[1245,2017,1278],{"class":1251},[1219,2019,2020],{},[1113,2021,2022,2023,2027],{},"You can also use ",[1121,2024,2025],{"href":489},[1117,2026,488],{}," to proxy headers to the call automatically.",[2029,2030,2031,2034],"caution",{},[1113,2032,2033],{},"Be very careful before proxying headers to an external API and just include headers that you need. Not all headers are safe to be bypassed and might introduce unwanted behavior. Here is a list of common headers that are NOT to be proxied:",[1133,2035,2036,2043,2054,2065],{},[1136,2037,2038,1119,2040],{},[1117,2039,1790],{},[1117,2041,2042],{},"accept",[1136,2044,2045,1119,2048,1119,2051],{},[1117,2046,2047],{},"content-length",[1117,2049,2050],{},"content-md5",[1117,2052,2053],{},"content-type",[1136,2055,2056,1119,2059,1119,2062],{},[1117,2057,2058],{},"x-forwarded-host",[1117,2060,2061],{},"x-forwarded-port",[1117,2063,2064],{},"x-forwarded-proto",[1136,2066,2067,1119,2070],{},[1117,2068,2069],{},"cf-connecting-ip",[1117,2071,2072],{},"cf-ray",[1176,2074,2076],{"id":2075},"usefetch",[1117,2077,444],{},[1113,2079,1195,2080,2084,2085,2087],{},[1121,2081,2082],{"href":445},[1117,2083,444],{}," composable uses ",[1117,2086,547],{}," under-the-hood to make SSR-safe network calls in the setup function.",[1236,2089,2091],{"className":1238,"code":2090,"filename":248,"language":1240,"meta":1627,"style":1241},"\u003Cscript setup lang=\"ts\">\nconst { data: count } = await useFetch('/api/count')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cp>Page visits: {{ count }}\u003C/p>\n\u003C/template>\n",[1117,2092,2093,2113,2146,2154,2158,2166,2184],{"__ignoreMap":1241},[1245,2094,2095,2097,2099,2101,2103,2105,2107,2109,2111],{"class":1247,"line":1248},[1245,2096,1252],{"class":1251},[1245,2098,1256],{"class":1255},[1245,2100,1260],{"class":1259},[1245,2102,1263],{"class":1259},[1245,2104,1266],{"class":1251},[1245,2106,1269],{"class":1251},[1245,2108,1273],{"class":1272},[1245,2110,1269],{"class":1251},[1245,2112,1278],{"class":1251},[1245,2114,2115,2117,2119,2122,2124,2127,2129,2131,2133,2135,2137,2139,2142,2144],{"class":1247,"line":1281},[1245,2116,1284],{"class":1259},[1245,2118,1287],{"class":1251},[1245,2120,2121],{"class":1255}," data",[1245,2123,1382],{"class":1251},[1245,2125,2126],{"class":1290}," count ",[1245,2128,1294],{"class":1251},[1245,2130,1297],{"class":1251},[1245,2132,1301],{"class":1300},[1245,2134,1305],{"class":1304},[1245,2136,1308],{"class":1290},[1245,2138,1311],{"class":1251},[1245,2140,2141],{"class":1272},"/api/count",[1245,2143,1311],{"class":1251},[1245,2145,1319],{"class":1290},[1245,2147,2148,2150,2152],{"class":1247,"line":1322},[1245,2149,1436],{"class":1251},[1245,2151,1256],{"class":1255},[1245,2153,1278],{"class":1251},[1245,2155,2156],{"class":1247,"line":1329},[1245,2157,1326],{"emptyLinePlaceholder":1325},[1245,2159,2160,2162,2164],{"class":1247,"line":1346},[1245,2161,1252],{"class":1251},[1245,2163,1453],{"class":1255},[1245,2165,1278],{"class":1251},[1245,2167,2168,2170,2172,2175,2178,2180,2182],{"class":1247,"line":1376},[1245,2169,1461],{"class":1251},[1245,2171,1113],{"class":1255},[1245,2173,2174],{"class":1251},">",[1245,2176,2177],{"class":1290},"Page visits: {{ count }}",[1245,2179,1436],{"class":1251},[1245,2181,1113],{"class":1255},[1245,2183,1278],{"class":1251},[1245,2185,2186,2188,2190],{"class":1247,"line":1396},[1245,2187,1436],{"class":1251},[1245,2189,1453],{"class":1255},[1245,2191,1278],{"class":1251},[1113,2193,2194,2195,2199,2200,2202],{},"This composable is a wrapper around the ",[1121,2196,2197],{"href":433},[1117,2198,432],{}," composable and ",[1117,2201,547],{}," utility.",[1219,2204,2208],{"icon":2205,"target":2206,"to":2207},"i-lucide-video","_blank","https://www.youtube.com/watch?v=njsGVmcWviY",[1113,2209,2210,2211,2213],{},"Watch the video from Alexander Lichter to avoid using ",[1117,2212,444],{}," the wrong way!",[1766,2215],{"to":445},[2217,2218],"link-example",{"to":824},[1176,2220,2222],{"id":2221},"useasyncdata",[1117,2223,432],{},[1113,2225,1195,2226,2228],{},[1117,2227,432],{}," composable is responsible for wrapping async logic and returning the result once it is resolved.",[1219,2230,2231],{},[1113,2232,2233,2236,2237,1751,2240,2242,2243,2246,2247,2251],{},[1117,2234,2235],{},"useFetch(url)"," is nearly equivalent to ",[1117,2238,2239],{},"useAsyncData(url, () => event.$fetch(url))",[1753,2241],{},"\nIt's developer experience sugar for the most common use case. (You can find out more about ",[1117,2244,2245],{},"event.fetch"," at ",[1121,2248,2249],{"href":489},[1117,2250,488],{},".)",[1219,2253,2255],{"icon":2205,"target":2206,"to":2254},"https://www.youtube.com/watch?v=0X-aOpSGabA",[1113,2256,2257,2258,1125,2260,1128],{},"Watch a video from Alexander Lichter to dig deeper into the difference between ",[1117,2259,444],{},[1117,2261,432],{},[1113,2263,2264,2265,2269,2270,2274],{},"There are some cases when using the ",[1121,2266,2267],{"href":445},[1117,2268,444],{}," composable is not appropriate, for example when a CMS or a third-party provide their own query layer. In this case, you can use ",[1121,2271,2272],{"href":433},[1117,2273,432],{}," to wrap your calls and still keep the benefits provided by the composable.",[1236,2276,2279],{"className":1238,"code":2277,"filename":2278,"language":1240,"meta":1241,"style":1241},"\u003Cscript setup lang=\"ts\">\nconst { data, error } = await useAsyncData('users', () => myGetFunction('users'))\n\n// This is also possible:\nconst { data, error } = await useAsyncData(() => myGetFunction('users'))\n\u003C/script>\n","pages/users.vue",[1117,2280,2281,2301,2353,2357,2362,2400],{"__ignoreMap":1241},[1245,2282,2283,2285,2287,2289,2291,2293,2295,2297,2299],{"class":1247,"line":1248},[1245,2284,1252],{"class":1251},[1245,2286,1256],{"class":1255},[1245,2288,1260],{"class":1259},[1245,2290,1263],{"class":1259},[1245,2292,1266],{"class":1251},[1245,2294,1269],{"class":1251},[1245,2296,1273],{"class":1272},[1245,2298,1269],{"class":1251},[1245,2300,1278],{"class":1251},[1245,2302,2303,2305,2307,2309,2311,2314,2316,2318,2320,2323,2325,2327,2330,2332,2334,2337,2339,2342,2344,2346,2348,2350],{"class":1247,"line":1281},[1245,2304,1284],{"class":1259},[1245,2306,1287],{"class":1251},[1245,2308,2121],{"class":1290},[1245,2310,1371],{"class":1251},[1245,2312,2313],{"class":1290}," error ",[1245,2315,1294],{"class":1251},[1245,2317,1297],{"class":1251},[1245,2319,1301],{"class":1300},[1245,2321,2322],{"class":1304}," useAsyncData",[1245,2324,1308],{"class":1290},[1245,2326,1311],{"class":1251},[1245,2328,2329],{"class":1272},"users",[1245,2331,1311],{"class":1251},[1245,2333,1371],{"class":1251},[1245,2335,2336],{"class":1251}," ()",[1245,2338,1886],{"class":1259},[1245,2340,2341],{"class":1304}," myGetFunction",[1245,2343,1308],{"class":1290},[1245,2345,1311],{"class":1251},[1245,2347,2329],{"class":1272},[1245,2349,1311],{"class":1251},[1245,2351,2352],{"class":1290},"))\n",[1245,2354,2355],{"class":1247,"line":1322},[1245,2356,1326],{"emptyLinePlaceholder":1325},[1245,2358,2359],{"class":1247,"line":1329},[1245,2360,2361],{"class":1409},"// This is also possible:\n",[1245,2363,2364,2366,2368,2370,2372,2374,2376,2378,2380,2382,2384,2386,2388,2390,2392,2394,2396,2398],{"class":1247,"line":1346},[1245,2365,1284],{"class":1259},[1245,2367,1287],{"class":1251},[1245,2369,2121],{"class":1290},[1245,2371,1371],{"class":1251},[1245,2373,2313],{"class":1290},[1245,2375,1294],{"class":1251},[1245,2377,1297],{"class":1251},[1245,2379,1301],{"class":1300},[1245,2381,2322],{"class":1304},[1245,2383,1308],{"class":1290},[1245,2385,1340],{"class":1251},[1245,2387,1886],{"class":1259},[1245,2389,2341],{"class":1304},[1245,2391,1308],{"class":1290},[1245,2393,1311],{"class":1251},[1245,2395,2329],{"class":1272},[1245,2397,1311],{"class":1251},[1245,2399,2352],{"class":1290},[1245,2401,2402,2404,2406],{"class":1247,"line":1376},[1245,2403,1436],{"class":1251},[1245,2405,1256],{"class":1255},[1245,2407,1278],{"class":1251},[1596,2409,2410],{},[1113,2411,2412,2413,2417,2418,2420,2421,2423,2424,2426,2427,2429,2430,2420,2432,2434,2435,2439,2440,1128],{},"The first argument of ",[1121,2414,2415],{"href":433},[1117,2416,432],{}," is a unique key used to cache the response of the second argument, the querying function. This key can be ignored by directly passing the querying function, the key will be auto-generated.\n",[1753,2419],{}," ",[1753,2422],{},"\nSince the autogenerated key only takes into account the file and line where ",[1117,2425,432],{}," is invoked, it is recommended to always create your own key to avoid unwanted behavior, like when you are creating your own custom composable wrapping ",[1117,2428,432],{},".\n",[1753,2431],{},[1753,2433],{},"\nSetting a key can be useful to share the same data between components using ",[1121,2436,2437],{"href":477},[1117,2438,476],{}," or to ",[1121,2441,2443],{"href":2442},"/docs/api/utils/refresh-nuxt-data#refresh-specific-data","refresh specific data",[1236,2445,2448],{"className":1238,"code":2446,"filename":2447,"language":1240,"meta":1241,"style":1241},"\u003Cscript setup lang=\"ts\">\nconst { id } = useRoute().params\n\nconst { data, error } = await useAsyncData(`user:${id}`, () => {\n  return myGetFunction('users', { id })\n})\n\u003C/script>\n","pages/users/[id].vue",[1117,2449,2450,2470,2493,2497,2542,2567,2573],{"__ignoreMap":1241},[1245,2451,2452,2454,2456,2458,2460,2462,2464,2466,2468],{"class":1247,"line":1248},[1245,2453,1252],{"class":1251},[1245,2455,1256],{"class":1255},[1245,2457,1260],{"class":1259},[1245,2459,1263],{"class":1259},[1245,2461,1266],{"class":1251},[1245,2463,1269],{"class":1251},[1245,2465,1273],{"class":1272},[1245,2467,1269],{"class":1251},[1245,2469,1278],{"class":1251},[1245,2471,2472,2474,2476,2479,2481,2483,2486,2488,2490],{"class":1247,"line":1281},[1245,2473,1284],{"class":1259},[1245,2475,1287],{"class":1251},[1245,2477,2478],{"class":1290}," id ",[1245,2480,1294],{"class":1251},[1245,2482,1297],{"class":1251},[1245,2484,2485],{"class":1304}," useRoute",[1245,2487,1340],{"class":1290},[1245,2489,1128],{"class":1251},[1245,2491,2492],{"class":1290},"params\n",[1245,2494,2495],{"class":1247,"line":1322},[1245,2496,1326],{"emptyLinePlaceholder":1325},[1245,2498,2499,2501,2503,2505,2507,2509,2511,2513,2515,2517,2519,2522,2525,2528,2531,2534,2536,2538,2540],{"class":1247,"line":1329},[1245,2500,1284],{"class":1259},[1245,2502,1287],{"class":1251},[1245,2504,2121],{"class":1290},[1245,2506,1371],{"class":1251},[1245,2508,2313],{"class":1290},[1245,2510,1294],{"class":1251},[1245,2512,1297],{"class":1251},[1245,2514,1301],{"class":1300},[1245,2516,2322],{"class":1304},[1245,2518,1308],{"class":1290},[1245,2520,2521],{"class":1251},"`",[1245,2523,2524],{"class":1272},"user:",[1245,2526,2527],{"class":1251},"${",[1245,2529,2530],{"class":1290},"id",[1245,2532,2533],{"class":1251},"}`",[1245,2535,1371],{"class":1251},[1245,2537,2336],{"class":1251},[1245,2539,1886],{"class":1259},[1245,2541,1343],{"class":1251},[1245,2543,2544,2546,2548,2550,2552,2554,2556,2558,2560,2563,2565],{"class":1247,"line":1346},[1245,2545,1980],{"class":1300},[1245,2547,2341],{"class":1304},[1245,2549,1308],{"class":1255},[1245,2551,1311],{"class":1251},[1245,2553,2329],{"class":1272},[1245,2555,1311],{"class":1251},[1245,2557,1371],{"class":1251},[1245,2559,1287],{"class":1251},[1245,2561,2562],{"class":1290}," id",[1245,2564,2003],{"class":1251},[1245,2566,1319],{"class":1255},[1245,2568,2569,2571],{"class":1247,"line":1376},[1245,2570,1294],{"class":1251},[1245,2572,1319],{"class":1290},[1245,2574,2575,2577,2579],{"class":1247,"line":1396},[1245,2576,1436],{"class":1251},[1245,2578,1256],{"class":1255},[1245,2580,1278],{"class":1251},[1113,2582,1195,2583,2585,2586,2588],{},[1117,2584,432],{}," composable is a great way to wrap and wait for multiple ",[1117,2587,547],{}," requests to be completed, and then process the results.",[1236,2590,2592],{"className":1238,"code":2591,"language":1240,"meta":1241,"style":1241},"\u003Cscript setup lang=\"ts\">\nconst { data: discounts, status } = await useAsyncData('cart-discount', async () => {\n  const [coupons, offers] = await Promise.all([\n    $fetch('/cart/coupons'),\n    $fetch('/cart/offers')\n  ])\n\n  return { coupons, offers }\n})\n// discounts.value.coupons\n// discounts.value.offers\n\u003C/script>\n",[1117,2593,2594,2614,2660,2694,2712,2727,2732,2736,2752,2758,2763,2768],{"__ignoreMap":1241},[1245,2595,2596,2598,2600,2602,2604,2606,2608,2610,2612],{"class":1247,"line":1248},[1245,2597,1252],{"class":1251},[1245,2599,1256],{"class":1255},[1245,2601,1260],{"class":1259},[1245,2603,1263],{"class":1259},[1245,2605,1266],{"class":1251},[1245,2607,1269],{"class":1251},[1245,2609,1273],{"class":1272},[1245,2611,1269],{"class":1251},[1245,2613,1278],{"class":1251},[1245,2615,2616,2618,2620,2622,2624,2627,2629,2632,2634,2636,2638,2640,2642,2644,2647,2649,2651,2654,2656,2658],{"class":1247,"line":1281},[1245,2617,1284],{"class":1259},[1245,2619,1287],{"class":1251},[1245,2621,2121],{"class":1255},[1245,2623,1382],{"class":1251},[1245,2625,2626],{"class":1290}," discounts",[1245,2628,1371],{"class":1251},[1245,2630,2631],{"class":1290}," status ",[1245,2633,1294],{"class":1251},[1245,2635,1297],{"class":1251},[1245,2637,1301],{"class":1300},[1245,2639,2322],{"class":1304},[1245,2641,1308],{"class":1290},[1245,2643,1311],{"class":1251},[1245,2645,2646],{"class":1272},"cart-discount",[1245,2648,1311],{"class":1251},[1245,2650,1371],{"class":1251},[1245,2652,2653],{"class":1259}," async",[1245,2655,2336],{"class":1251},[1245,2657,1886],{"class":1259},[1245,2659,1343],{"class":1251},[1245,2661,2662,2664,2667,2670,2672,2675,2678,2680,2682,2686,2688,2691],{"class":1247,"line":1322},[1245,2663,1349],{"class":1259},[1245,2665,2666],{"class":1251}," [",[1245,2668,2669],{"class":1290},"coupons",[1245,2671,1371],{"class":1251},[1245,2673,2674],{"class":1290}," offers",[1245,2676,2677],{"class":1251},"]",[1245,2679,1297],{"class":1251},[1245,2681,1301],{"class":1300},[1245,2683,2685],{"class":2684},"sT2Ow"," Promise",[1245,2687,1128],{"class":1251},[1245,2689,2690],{"class":1304},"all",[1245,2692,2693],{"class":1255},"([\n",[1245,2695,2696,2699,2701,2703,2706,2708,2710],{"class":1247,"line":1329},[1245,2697,2698],{"class":1304},"    $fetch",[1245,2700,1308],{"class":1255},[1245,2702,1311],{"class":1251},[1245,2704,2705],{"class":1272},"/cart/coupons",[1245,2707,1311],{"class":1251},[1245,2709,1844],{"class":1255},[1245,2711,1393],{"class":1251},[1245,2713,2714,2716,2718,2720,2723,2725],{"class":1247,"line":1346},[1245,2715,2698],{"class":1304},[1245,2717,1308],{"class":1255},[1245,2719,1311],{"class":1251},[1245,2721,2722],{"class":1272},"/cart/offers",[1245,2724,1311],{"class":1251},[1245,2726,1319],{"class":1255},[1245,2728,2729],{"class":1247,"line":1376},[1245,2730,2731],{"class":1255},"  ])\n",[1245,2733,2734],{"class":1247,"line":1396},[1245,2735,1326],{"emptyLinePlaceholder":1325},[1245,2737,2738,2740,2742,2745,2747,2749],{"class":1247,"line":1406},[1245,2739,1980],{"class":1300},[1245,2741,1287],{"class":1251},[1245,2743,2744],{"class":1290}," coupons",[1245,2746,1371],{"class":1251},[1245,2748,2674],{"class":1290},[1245,2750,2751],{"class":1251}," }\n",[1245,2753,2754,2756],{"class":1247,"line":1413},[1245,2755,1294],{"class":1251},[1245,2757,1319],{"class":1290},[1245,2759,2760],{"class":1247,"line":1419},[1245,2761,2762],{"class":1409},"// discounts.value.coupons\n",[1245,2764,2765],{"class":1247,"line":1427},[1245,2766,2767],{"class":1409},"// discounts.value.offers\n",[1245,2769,2770,2772,2774],{"class":1247,"line":1433},[1245,2771,1436],{"class":1251},[1245,2773,1256],{"class":1255},[1245,2775,1278],{"class":1251},[1596,2777,2778,2788],{},[1113,2779,2780,2782,2783,2787],{},[1117,2781,432],{}," is for fetching and caching data, not triggering side effects like calling Pinia actions, as this can cause unintended behavior such as repeated executions with nullish values. If you need to trigger side effects, use the ",[1121,2784,2785],{"href":560},[1117,2786,559],{}," utility to do so.",[1236,2789,2791],{"className":1238,"code":2790,"language":1240,"meta":1241,"style":1241},"\u003Cscript setup lang=\"ts\">\nconst offersStore = useOffersStore()\n\n// you can't do this\nawait useAsyncData(() => offersStore.getOffer(route.params.slug))\n\u003C/script>\n",[1117,2792,2793,2813,2828,2832,2837,2871],{"__ignoreMap":1241},[1245,2794,2795,2797,2799,2801,2803,2805,2807,2809,2811],{"class":1247,"line":1248},[1245,2796,1252],{"class":1251},[1245,2798,1256],{"class":1255},[1245,2800,1260],{"class":1259},[1245,2802,1263],{"class":1259},[1245,2804,1266],{"class":1251},[1245,2806,1269],{"class":1251},[1245,2808,1273],{"class":1272},[1245,2810,1269],{"class":1251},[1245,2812,1278],{"class":1251},[1245,2814,2815,2817,2820,2822,2825],{"class":1247,"line":1281},[1245,2816,1284],{"class":1259},[1245,2818,2819],{"class":1290}," offersStore ",[1245,2821,1266],{"class":1251},[1245,2823,2824],{"class":1304}," useOffersStore",[1245,2826,2827],{"class":1290},"()\n",[1245,2829,2830],{"class":1247,"line":1322},[1245,2831,1326],{"emptyLinePlaceholder":1325},[1245,2833,2834],{"class":1247,"line":1329},[1245,2835,2836],{"class":1409},"// you can't do this\n",[1245,2838,2839,2842,2844,2846,2848,2850,2853,2855,2858,2861,2863,2866,2868],{"class":1247,"line":1346},[1245,2840,2841],{"class":1300},"await",[1245,2843,2322],{"class":1304},[1245,2845,1308],{"class":1290},[1245,2847,1340],{"class":1251},[1245,2849,1886],{"class":1259},[1245,2851,2852],{"class":1290}," offersStore",[1245,2854,1128],{"class":1251},[1245,2856,2857],{"class":1304},"getOffer",[1245,2859,2860],{"class":1290},"(route",[1245,2862,1128],{"class":1251},[1245,2864,2865],{"class":1290},"params",[1245,2867,1128],{"class":1251},[1245,2869,2870],{"class":1290},"slug))\n",[1245,2872,2873,2875,2877],{"class":1247,"line":1376},[1245,2874,1436],{"class":1251},[1245,2876,1256],{"class":1255},[1245,2878,1278],{"class":1251},[1766,2880,2881],{"to":433},[1113,2882,1770,2883,1128],{},[1117,2884,432],{},[1176,2886,2888],{"id":2887},"return-values","Return Values",[1113,2890,2891,1125,2893,2895],{},[1117,2892,444],{},[1117,2894,432],{}," have the same return values listed below.",[1133,2897,2898,2903,2917,2943,2948],{},[1136,2899,2900,2902],{},[1117,2901,1474],{},": the result of the asynchronous function that is passed in.",[1136,2904,2905,2908,2909,2912,2913,2916],{},[1117,2906,2907],{},"refresh","/",[1117,2910,2911],{},"execute",": a function that can be used to refresh the data returned by the ",[1117,2914,2915],{},"handler"," function.",[1136,2918,2919,2922,2923,2925,2926,2929,2930,2925,2933,2929,2936,2925,2939,2942],{},[1117,2920,2921],{},"clear",": a function that can be used to set ",[1117,2924,1474],{}," to ",[1117,2927,2928],{},"undefined",", set ",[1117,2931,2932],{},"error",[1117,2934,2935],{},"null",[1117,2937,2938],{},"status",[1117,2940,2941],{},"idle",", and mark any currently pending requests as cancelled.",[1136,2944,2945,2947],{},[1117,2946,2932],{},": an error object if the data fetching failed.",[1136,2949,2950,2952,2953,1119,2956,1119,2959,1119,2962,1791],{},[1117,2951,2938],{},": a string indicating the status of the data request (",[1117,2954,2955],{},"\"idle\"",[1117,2957,2958],{},"\"pending\"",[1117,2960,2961],{},"\"success\"",[1117,2963,2964],{},"\"error\"",[1596,2966,2967],{},[1113,2968,2969,1119,2971,1125,2973,2975,2976,2979,2980],{},[1117,2970,1474],{},[1117,2972,2932],{},[1117,2974,2938],{}," are Vue refs accessible with ",[1117,2977,2978],{},".value"," in ",[1117,2981,2982],{},"\u003Cscript setup>",[1113,2984,2985,2986,2988],{},"By default, Nuxt waits until a ",[1117,2987,2907],{}," is finished before it can be executed again.",[1596,2990,2991],{},[1113,2992,2993,2994,2997,2998,3002,3003,3005,3006,3008,3009,1128],{},"If you have not fetched data on the server (for example, with ",[1117,2995,2996],{},"server: false","), then the data ",[2999,3000,3001],"em",{},"will not"," be fetched until hydration completes. This means even if you await ",[1117,3004,444],{}," on client-side, ",[1117,3007,1474],{}," will remain null within ",[1117,3010,2982],{},[1176,3012,3014],{"id":3013},"options","Options",[1113,3016,3017,1125,3021,3025],{},[1121,3018,3019],{"href":433},[1117,3020,432],{},[1121,3022,3023],{"href":445},[1117,3024,444],{}," return the same object type and accept a common set of options as their last argument. They can help you control the composables behavior, such as navigation blocking, caching or execution.",[1580,3027,3029],{"id":3028},"lazy","Lazy",[1113,3031,3032,3033,3035,3036,3038],{},"By default, data fetching composables will wait for the resolution of their asynchronous function before navigating to a new page by using Vue’s Suspense. This feature can be ignored on client-side navigation with the ",[1117,3034,3028],{}," option. In that case, you will have to manually handle loading state using the ",[1117,3037,2938],{}," value.",[1236,3040,3042],{"className":1238,"code":3041,"filename":248,"language":1240,"meta":1627,"style":1241},"\u003Cscript setup lang=\"ts\">\nconst { status, data: posts } = useFetch('/api/posts', {\n  lazy: true\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003C!-- you will need to handle a loading state -->\n  \u003Cdiv v-if=\"status === 'pending'\">\n    Loading ...\n  \u003C/div>\n  \u003Cdiv v-else>\n    \u003Cdiv v-for=\"post in posts\">\n      \u003C!-- do something -->\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n",[1117,3043,3044,3064,3101,3112,3118,3126,3130,3138,3143,3162,3167,3175,3185,3205,3210,3218,3226],{"__ignoreMap":1241},[1245,3045,3046,3048,3050,3052,3054,3056,3058,3060,3062],{"class":1247,"line":1248},[1245,3047,1252],{"class":1251},[1245,3049,1256],{"class":1255},[1245,3051,1260],{"class":1259},[1245,3053,1263],{"class":1259},[1245,3055,1266],{"class":1251},[1245,3057,1269],{"class":1251},[1245,3059,1273],{"class":1272},[1245,3061,1269],{"class":1251},[1245,3063,1278],{"class":1251},[1245,3065,3066,3068,3070,3073,3075,3077,3079,3082,3084,3086,3088,3090,3092,3095,3097,3099],{"class":1247,"line":1281},[1245,3067,1284],{"class":1259},[1245,3069,1287],{"class":1251},[1245,3071,3072],{"class":1290}," status",[1245,3074,1371],{"class":1251},[1245,3076,2121],{"class":1255},[1245,3078,1382],{"class":1251},[1245,3080,3081],{"class":1290}," posts ",[1245,3083,1294],{"class":1251},[1245,3085,1297],{"class":1251},[1245,3087,1305],{"class":1304},[1245,3089,1308],{"class":1290},[1245,3091,1311],{"class":1251},[1245,3093,3094],{"class":1272},"/api/posts",[1245,3096,1311],{"class":1251},[1245,3098,1371],{"class":1251},[1245,3100,1343],{"class":1251},[1245,3102,3103,3106,3108],{"class":1247,"line":1322},[1245,3104,3105],{"class":1255},"  lazy",[1245,3107,1382],{"class":1251},[1245,3109,3111],{"class":3110},"sagxc"," true\n",[1245,3113,3114,3116],{"class":1247,"line":1329},[1245,3115,1294],{"class":1251},[1245,3117,1319],{"class":1290},[1245,3119,3120,3122,3124],{"class":1247,"line":1346},[1245,3121,1436],{"class":1251},[1245,3123,1256],{"class":1255},[1245,3125,1278],{"class":1251},[1245,3127,3128],{"class":1247,"line":1376},[1245,3129,1326],{"emptyLinePlaceholder":1325},[1245,3131,3132,3134,3136],{"class":1247,"line":1396},[1245,3133,1252],{"class":1251},[1245,3135,1453],{"class":1255},[1245,3137,1278],{"class":1251},[1245,3139,3140],{"class":1247,"line":1406},[1245,3141,3142],{"class":1409},"  \u003C!-- you will need to handle a loading state -->\n",[1245,3144,3145,3147,3149,3151,3153,3155,3158,3160],{"class":1247,"line":1413},[1245,3146,1461],{"class":1251},[1245,3148,1464],{"class":1255},[1245,3150,1467],{"class":1259},[1245,3152,1266],{"class":1251},[1245,3154,1269],{"class":1251},[1245,3156,3157],{"class":1272},"status === 'pending'",[1245,3159,1269],{"class":1251},[1245,3161,1278],{"class":1251},[1245,3163,3164],{"class":1247,"line":1419},[1245,3165,3166],{"class":1290},"    Loading ...\n",[1245,3168,3169,3171,3173],{"class":1247,"line":1427},[1245,3170,1493],{"class":1251},[1245,3172,1464],{"class":1255},[1245,3174,1278],{"class":1251},[1245,3176,3177,3179,3181,3183],{"class":1247,"line":1433},[1245,3178,1461],{"class":1251},[1245,3180,1464],{"class":1255},[1245,3182,1507],{"class":1259},[1245,3184,1278],{"class":1251},[1245,3186,3187,3189,3191,3194,3196,3198,3201,3203],{"class":1247,"line":1443},[1245,3188,1515],{"class":1251},[1245,3190,1464],{"class":1255},[1245,3192,3193],{"class":1259}," v-for",[1245,3195,1266],{"class":1251},[1245,3197,1269],{"class":1251},[1245,3199,3200],{"class":1272},"post in posts",[1245,3202,1269],{"class":1251},[1245,3204,1278],{"class":1251},[1245,3206,3207],{"class":1247,"line":1448},[1245,3208,3209],{"class":1409},"      \u003C!-- do something -->\n",[1245,3211,3212,3214,3216],{"class":1247,"line":1458},[1245,3213,1547],{"class":1251},[1245,3215,1464],{"class":1255},[1245,3217,1278],{"class":1251},[1245,3219,3220,3222,3224],{"class":1247,"line":1484},[1245,3221,1493],{"class":1251},[1245,3223,1464],{"class":1255},[1245,3225,1278],{"class":1251},[1245,3227,3228,3230,3232],{"class":1247,"line":1490},[1245,3229,1436],{"class":1251},[1245,3231,1453],{"class":1255},[1245,3233,1278],{"class":1251},[1113,3235,3236,3237,1125,3241,3243],{},"You can alternatively use ",[1121,3238,3239],{"href":465},[1117,3240,464],{},[1117,3242,460],{}," as convenient methods to perform the same.",[1236,3245,3247],{"className":1238,"code":3246,"language":1240,"meta":1627,"style":1241},"\u003Cscript setup lang=\"ts\">\nconst { status, data: posts } = useLazyFetch('/api/posts')\n\u003C/script>\n",[1117,3248,3249,3269,3302],{"__ignoreMap":1241},[1245,3250,3251,3253,3255,3257,3259,3261,3263,3265,3267],{"class":1247,"line":1248},[1245,3252,1252],{"class":1251},[1245,3254,1256],{"class":1255},[1245,3256,1260],{"class":1259},[1245,3258,1263],{"class":1259},[1245,3260,1266],{"class":1251},[1245,3262,1269],{"class":1251},[1245,3264,1273],{"class":1272},[1245,3266,1269],{"class":1251},[1245,3268,1278],{"class":1251},[1245,3270,3271,3273,3275,3277,3279,3281,3283,3285,3287,3289,3292,3294,3296,3298,3300],{"class":1247,"line":1281},[1245,3272,1284],{"class":1259},[1245,3274,1287],{"class":1251},[1245,3276,3072],{"class":1290},[1245,3278,1371],{"class":1251},[1245,3280,2121],{"class":1255},[1245,3282,1382],{"class":1251},[1245,3284,3081],{"class":1290},[1245,3286,1294],{"class":1251},[1245,3288,1297],{"class":1251},[1245,3290,3291],{"class":1304}," useLazyFetch",[1245,3293,1308],{"class":1290},[1245,3295,1311],{"class":1251},[1245,3297,3094],{"class":1272},[1245,3299,1311],{"class":1251},[1245,3301,1319],{"class":1290},[1245,3303,3304,3306,3308],{"class":1247,"line":1322},[1245,3305,1436],{"class":1251},[1245,3307,1256],{"class":1255},[1245,3309,1278],{"class":1251},[1766,3311,3312],{"to":465},[1113,3313,1770,3314,1128],{},[1117,3315,464],{},[1766,3317,3318],{"to":461},[1113,3319,1770,3320,1128],{},[1117,3321,460],{},[1580,3323,3325],{"id":3324},"client-only-fetching","Client-only fetching",[1113,3327,3328,3329,3331,3332,3335],{},"By default, data fetching composables will perform their asynchronous function on both client and server environments. Set the ",[1117,3330,219],{}," option to ",[1117,3333,3334],{},"false"," to only perform the call on the client-side. On initial load, the data will not be fetched before hydration is complete so you have to handle a pending state, though on subsequent client-side navigation the data will be awaited before loading the page.",[1113,3337,3338,3339,3341],{},"Combined with the ",[1117,3340,3028],{}," option, this can be useful for data that is not needed on the first render (for example, non-SEO sensitive data).",[1236,3343,3345],{"className":1858,"code":3344,"language":1273,"meta":1627,"style":1241},"/* This call is performed before hydration */\nconst articles = await useFetch('/api/article')\n\n/* This call will only be performed on the client */\nconst { status, data: comments } = useFetch('/api/comments', {\n  lazy: true,\n  server: false\n})\n",[1117,3346,3347,3352,3376,3380,3385,3421,3432,3442],{"__ignoreMap":1241},[1245,3348,3349],{"class":1247,"line":1248},[1245,3350,3351],{"class":1409},"/* This call is performed before hydration */\n",[1245,3353,3354,3356,3359,3361,3363,3365,3367,3369,3372,3374],{"class":1247,"line":1281},[1245,3355,1284],{"class":1259},[1245,3357,3358],{"class":1290}," articles ",[1245,3360,1266],{"class":1251},[1245,3362,1301],{"class":1300},[1245,3364,1305],{"class":1304},[1245,3366,1308],{"class":1290},[1245,3368,1311],{"class":1251},[1245,3370,3371],{"class":1272},"/api/article",[1245,3373,1311],{"class":1251},[1245,3375,1319],{"class":1290},[1245,3377,3378],{"class":1247,"line":1322},[1245,3379,1326],{"emptyLinePlaceholder":1325},[1245,3381,3382],{"class":1247,"line":1329},[1245,3383,3384],{"class":1409},"/* This call will only be performed on the client */\n",[1245,3386,3387,3389,3391,3393,3395,3397,3399,3402,3404,3406,3408,3410,3412,3415,3417,3419],{"class":1247,"line":1346},[1245,3388,1284],{"class":1259},[1245,3390,1287],{"class":1251},[1245,3392,3072],{"class":1290},[1245,3394,1371],{"class":1251},[1245,3396,2121],{"class":1255},[1245,3398,1382],{"class":1251},[1245,3400,3401],{"class":1290}," comments ",[1245,3403,1294],{"class":1251},[1245,3405,1297],{"class":1251},[1245,3407,1305],{"class":1304},[1245,3409,1308],{"class":1290},[1245,3411,1311],{"class":1251},[1245,3413,3414],{"class":1272},"/api/comments",[1245,3416,1311],{"class":1251},[1245,3418,1371],{"class":1251},[1245,3420,1343],{"class":1251},[1245,3422,3423,3425,3427,3430],{"class":1247,"line":1376},[1245,3424,3105],{"class":1255},[1245,3426,1382],{"class":1251},[1245,3428,3429],{"class":3110}," true",[1245,3431,1393],{"class":1251},[1245,3433,3434,3437,3439],{"class":1247,"line":1396},[1245,3435,3436],{"class":1255},"  server",[1245,3438,1382],{"class":1251},[1245,3440,3441],{"class":3110}," false\n",[1245,3443,3444,3446],{"class":1247,"line":1406},[1245,3445,1294],{"class":1251},[1245,3447,1319],{"class":1290},[1113,3449,1195,3450,3452,3453,1128],{},[1117,3451,444],{}," composable is meant to be invoked in setup method or called directly at the top level of a function in lifecycle hooks, otherwise you should use ",[1121,3454,3456,3458],{"href":3455},"#fetch",[1117,3457,547],{}," method",[1580,3460,3462],{"id":3461},"minimize-payload-size","Minimize payload size",[1113,3464,1195,3465,3468],{},[1117,3466,3467],{},"pick"," option helps you to minimize the payload size stored in your HTML document by only selecting the fields that you want returned from the composables.",[1236,3470,3472],{"className":1238,"code":3471,"language":1240,"meta":1241,"style":1241},"\u003Cscript setup lang=\"ts\">\n/* only pick the fields used in your template */\nconst { data: mountain } = await useFetch('/api/mountains/everest', {\n  pick: ['title', 'description']\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Ch1>{{ mountain.title }}\u003C/h1>\n  \u003Cp>{{ mountain.description }}\u003C/p>\n\u003C/template>\n",[1117,3473,3474,3494,3499,3533,3561,3567,3575,3579,3587,3612,3633],{"__ignoreMap":1241},[1245,3475,3476,3478,3480,3482,3484,3486,3488,3490,3492],{"class":1247,"line":1248},[1245,3477,1252],{"class":1251},[1245,3479,1256],{"class":1255},[1245,3481,1260],{"class":1259},[1245,3483,1263],{"class":1259},[1245,3485,1266],{"class":1251},[1245,3487,1269],{"class":1251},[1245,3489,1273],{"class":1272},[1245,3491,1269],{"class":1251},[1245,3493,1278],{"class":1251},[1245,3495,3496],{"class":1247,"line":1281},[1245,3497,3498],{"class":1409},"/* only pick the fields used in your template */\n",[1245,3500,3501,3503,3505,3507,3509,3512,3514,3516,3518,3520,3522,3524,3527,3529,3531],{"class":1247,"line":1322},[1245,3502,1284],{"class":1259},[1245,3504,1287],{"class":1251},[1245,3506,2121],{"class":1255},[1245,3508,1382],{"class":1251},[1245,3510,3511],{"class":1290}," mountain ",[1245,3513,1294],{"class":1251},[1245,3515,1297],{"class":1251},[1245,3517,1301],{"class":1300},[1245,3519,1305],{"class":1304},[1245,3521,1308],{"class":1290},[1245,3523,1311],{"class":1251},[1245,3525,3526],{"class":1272},"/api/mountains/everest",[1245,3528,1311],{"class":1251},[1245,3530,1371],{"class":1251},[1245,3532,1343],{"class":1251},[1245,3534,3535,3538,3540,3542,3544,3547,3549,3551,3553,3556,3558],{"class":1247,"line":1329},[1245,3536,3537],{"class":1255},"  pick",[1245,3539,1382],{"class":1251},[1245,3541,2666],{"class":1290},[1245,3543,1311],{"class":1251},[1245,3545,3546],{"class":1272},"title",[1245,3548,1311],{"class":1251},[1245,3550,1371],{"class":1251},[1245,3552,1385],{"class":1251},[1245,3554,3555],{"class":1272},"description",[1245,3557,1311],{"class":1251},[1245,3559,3560],{"class":1290},"]\n",[1245,3562,3563,3565],{"class":1247,"line":1346},[1245,3564,1294],{"class":1251},[1245,3566,1319],{"class":1290},[1245,3568,3569,3571,3573],{"class":1247,"line":1376},[1245,3570,1436],{"class":1251},[1245,3572,1256],{"class":1255},[1245,3574,1278],{"class":1251},[1245,3576,3577],{"class":1247,"line":1396},[1245,3578,1326],{"emptyLinePlaceholder":1325},[1245,3580,3581,3583,3585],{"class":1247,"line":1406},[1245,3582,1252],{"class":1251},[1245,3584,1453],{"class":1255},[1245,3586,1278],{"class":1251},[1245,3588,3589,3591,3594,3597,3600,3602,3605,3608,3610],{"class":1247,"line":1413},[1245,3590,1461],{"class":1251},[1245,3592,3593],{"class":1255},"h1",[1245,3595,3596],{"class":1251},">{{",[1245,3598,3599],{"class":1290}," mountain",[1245,3601,1128],{"class":1251},[1245,3603,3604],{"class":1290},"title ",[1245,3606,3607],{"class":1251},"}}\u003C/",[1245,3609,3593],{"class":1255},[1245,3611,1278],{"class":1251},[1245,3613,3614,3616,3618,3620,3622,3624,3627,3629,3631],{"class":1247,"line":1419},[1245,3615,1461],{"class":1251},[1245,3617,1113],{"class":1255},[1245,3619,3596],{"class":1251},[1245,3621,3599],{"class":1290},[1245,3623,1128],{"class":1251},[1245,3625,3626],{"class":1290},"description ",[1245,3628,3607],{"class":1251},[1245,3630,1113],{"class":1255},[1245,3632,1278],{"class":1251},[1245,3634,3635,3637,3639],{"class":1247,"line":1427},[1245,3636,1436],{"class":1251},[1245,3638,1453],{"class":1255},[1245,3640,1278],{"class":1251},[1113,3642,3643,3644,3647],{},"If you need more control or map over several objects, you can use the ",[1117,3645,3646],{},"transform"," function to alter the result of the query.",[1236,3649,3651],{"className":1858,"code":3650,"language":1273,"meta":1241,"style":1241},"const { data: mountains } = await useFetch('/api/mountains', {\n  transform: (mountains) => {\n    return mountains.map(mountain => ({ title: mountain.title, description: mountain.description }))\n  }\n})\n",[1117,3652,3653,3687,3706,3759,3764],{"__ignoreMap":1241},[1245,3654,3655,3657,3659,3661,3663,3666,3668,3670,3672,3674,3676,3678,3681,3683,3685],{"class":1247,"line":1248},[1245,3656,1284],{"class":1259},[1245,3658,1287],{"class":1251},[1245,3660,2121],{"class":1255},[1245,3662,1382],{"class":1251},[1245,3664,3665],{"class":1290}," mountains ",[1245,3667,1294],{"class":1251},[1245,3669,1297],{"class":1251},[1245,3671,1301],{"class":1300},[1245,3673,1305],{"class":1304},[1245,3675,1308],{"class":1290},[1245,3677,1311],{"class":1251},[1245,3679,3680],{"class":1272},"/api/mountains",[1245,3682,1311],{"class":1251},[1245,3684,1371],{"class":1251},[1245,3686,1343],{"class":1251},[1245,3688,3689,3692,3694,3697,3700,3702,3704],{"class":1247,"line":1281},[1245,3690,3691],{"class":1304},"  transform",[1245,3693,1382],{"class":1251},[1245,3695,3696],{"class":1251}," (",[1245,3698,3699],{"class":1882},"mountains",[1245,3701,1844],{"class":1251},[1245,3703,1886],{"class":1259},[1245,3705,1343],{"class":1251},[1245,3707,3708,3711,3714,3716,3719,3721,3724,3726,3728,3731,3734,3736,3738,3740,3742,3744,3747,3749,3751,3753,3755,3757],{"class":1247,"line":1322},[1245,3709,3710],{"class":1300},"    return",[1245,3712,3713],{"class":1290}," mountains",[1245,3715,1128],{"class":1251},[1245,3717,3718],{"class":1304},"map",[1245,3720,1308],{"class":1255},[1245,3722,3723],{"class":1882},"mountain",[1245,3725,1886],{"class":1259},[1245,3727,3696],{"class":1255},[1245,3729,3730],{"class":1251},"{",[1245,3732,3733],{"class":1255}," title",[1245,3735,1382],{"class":1251},[1245,3737,3599],{"class":1290},[1245,3739,1128],{"class":1251},[1245,3741,3546],{"class":1290},[1245,3743,1371],{"class":1251},[1245,3745,3746],{"class":1255}," description",[1245,3748,1382],{"class":1251},[1245,3750,3599],{"class":1290},[1245,3752,1128],{"class":1251},[1245,3754,3555],{"class":1290},[1245,3756,2003],{"class":1251},[1245,3758,2352],{"class":1255},[1245,3760,3761],{"class":1247,"line":1329},[1245,3762,3763],{"class":1251},"  }\n",[1245,3765,3766,3768],{"class":1247,"line":1346},[1245,3767,1294],{"class":1251},[1245,3769,1319],{"class":1290},[1596,3771,3772],{},[1113,3773,1169,3774,1125,3776,3778],{},[1117,3775,3467],{},[1117,3777,3646],{}," don't prevent the unwanted data from being fetched initially. But they will prevent unwanted data from being added to the payload transferred from server to client.",[1580,3780,3782],{"id":3781},"caching-and-refetching","Caching and refetching",[3784,3785,3787],"h4",{"id":3786},"keys","Keys",[1113,3789,3790,1125,3794,3798],{},[1121,3791,3792],{"href":445},[1117,3793,444],{},[1121,3795,3796],{"href":433},[1117,3797,432],{}," use keys to prevent refetching the same data.",[1133,3800,3801,3815],{},[1136,3802,3803,3807,3808,3811,3812,3814],{},[1121,3804,3805],{"href":445},[1117,3806,444],{}," uses the provided URL as a key. Alternatively, a ",[1117,3809,3810],{},"key"," value can be provided in the ",[1117,3813,3013],{}," object passed as a last argument.",[1136,3816,3817,3821,3822,3824],{},[1121,3818,3819],{"href":433},[1117,3820,432],{}," uses its first argument as a key if it is a string. If the first argument is the handler function that performs the query, then a key that is unique to the file name and line number of the instance of ",[1117,3823,432],{}," will be generated for you.",[1219,3826,3827],{},[1113,3828,3829,3830],{},"To get the cached data by key, you can use ",[1121,3831,3832],{"href":477},[1117,3833,476],{},[3784,3835,3837],{"id":3836},"refresh-and-execute","Refresh and execute",[1113,3839,3840,3841,3843,3844,3846],{},"If you want to fetch or refresh data manually, use the ",[1117,3842,2911],{}," or ",[1117,3845,2907],{}," function provided by the composables.",[1236,3848,3850],{"className":1238,"code":3849,"language":1240,"meta":1627,"style":1241},"\u003Cscript setup lang=\"ts\">\nconst { data, error, execute, refresh } = await useFetch('/api/users')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp>{{ data }}\u003C/p>\n    \u003Cbutton @click=\"() => refresh()\">Refresh data\u003C/button>\n  \u003C/div>\n\u003C/template>\n",[1117,3851,3852,3872,3914,3922,3926,3934,3942,3959,3989,3997],{"__ignoreMap":1241},[1245,3853,3854,3856,3858,3860,3862,3864,3866,3868,3870],{"class":1247,"line":1248},[1245,3855,1252],{"class":1251},[1245,3857,1256],{"class":1255},[1245,3859,1260],{"class":1259},[1245,3861,1263],{"class":1259},[1245,3863,1266],{"class":1251},[1245,3865,1269],{"class":1251},[1245,3867,1273],{"class":1272},[1245,3869,1269],{"class":1251},[1245,3871,1278],{"class":1251},[1245,3873,3874,3876,3878,3880,3882,3885,3887,3890,3892,3895,3897,3899,3901,3903,3905,3907,3910,3912],{"class":1247,"line":1281},[1245,3875,1284],{"class":1259},[1245,3877,1287],{"class":1251},[1245,3879,2121],{"class":1290},[1245,3881,1371],{"class":1251},[1245,3883,3884],{"class":1290}," error",[1245,3886,1371],{"class":1251},[1245,3888,3889],{"class":1290}," execute",[1245,3891,1371],{"class":1251},[1245,3893,3894],{"class":1290}," refresh ",[1245,3896,1294],{"class":1251},[1245,3898,1297],{"class":1251},[1245,3900,1301],{"class":1300},[1245,3902,1305],{"class":1304},[1245,3904,1308],{"class":1290},[1245,3906,1311],{"class":1251},[1245,3908,3909],{"class":1272},"/api/users",[1245,3911,1311],{"class":1251},[1245,3913,1319],{"class":1290},[1245,3915,3916,3918,3920],{"class":1247,"line":1322},[1245,3917,1436],{"class":1251},[1245,3919,1256],{"class":1255},[1245,3921,1278],{"class":1251},[1245,3923,3924],{"class":1247,"line":1329},[1245,3925,1326],{"emptyLinePlaceholder":1325},[1245,3927,3928,3930,3932],{"class":1247,"line":1346},[1245,3929,1252],{"class":1251},[1245,3931,1453],{"class":1255},[1245,3933,1278],{"class":1251},[1245,3935,3936,3938,3940],{"class":1247,"line":1376},[1245,3937,1461],{"class":1251},[1245,3939,1464],{"class":1255},[1245,3941,1278],{"class":1251},[1245,3943,3944,3946,3948,3950,3953,3955,3957],{"class":1247,"line":1396},[1245,3945,1515],{"class":1251},[1245,3947,1113],{"class":1255},[1245,3949,2174],{"class":1251},[1245,3951,3952],{"class":1290},"{{ data }}",[1245,3954,1436],{"class":1251},[1245,3956,1113],{"class":1255},[1245,3958,1278],{"class":1251},[1245,3960,3961,3963,3966,3969,3971,3973,3976,3978,3980,3983,3985,3987],{"class":1247,"line":1406},[1245,3962,1515],{"class":1251},[1245,3964,3965],{"class":1255},"button",[1245,3967,3968],{"class":1259}," @click",[1245,3970,1266],{"class":1251},[1245,3972,1269],{"class":1251},[1245,3974,3975],{"class":1272},"() => refresh()",[1245,3977,1269],{"class":1251},[1245,3979,2174],{"class":1251},[1245,3981,3982],{"class":1290},"Refresh data",[1245,3984,1436],{"class":1251},[1245,3986,3965],{"class":1255},[1245,3988,1278],{"class":1251},[1245,3990,3991,3993,3995],{"class":1247,"line":1413},[1245,3992,1493],{"class":1251},[1245,3994,1464],{"class":1255},[1245,3996,1278],{"class":1251},[1245,3998,3999,4001,4003],{"class":1247,"line":1419},[1245,4000,1436],{"class":1251},[1245,4002,1453],{"class":1255},[1245,4004,1278],{"class":1251},[1113,4006,1195,4007,4009,4010,4012,4013,1128],{},[1117,4008,2911],{}," function is an alias for ",[1117,4011,2907],{}," that works in exactly the same way but is more semantic for cases when the fetch is ",[1121,4014,4016],{"href":4015},"#not-immediate","not immediate",[1219,4018,4019],{},[1113,4020,4021,4022,1125,4026,1128],{},"To globally refetch or invalidate cached data, see ",[1121,4023,4024],{"href":568},[1117,4025,567],{},[1121,4027,4028],{"href":632},[1117,4029,631],{},[3784,4031,4032],{"id":2921},"Clear",[1113,4034,4035,4036,4038,4039,3846],{},"If you want to clear the data provided, for whatever reason, without needing to know the specific key to pass to ",[1117,4037,567],{},", you can use the ",[1117,4040,2921],{},[1236,4042,4044],{"className":1238,"code":4043,"language":1240,"meta":1627,"style":1241},"\u003Cscript setup lang=\"ts\">\nconst { data, clear } = await useFetch('/api/users')\n\nconst route = useRoute()\nwatch(() => route.path, (path) => {\n  if (path === '/') clear()\n})\n\u003C/script>\n",[1117,4045,4046,4066,4097,4101,4114,4145,4170,4176],{"__ignoreMap":1241},[1245,4047,4048,4050,4052,4054,4056,4058,4060,4062,4064],{"class":1247,"line":1248},[1245,4049,1252],{"class":1251},[1245,4051,1256],{"class":1255},[1245,4053,1260],{"class":1259},[1245,4055,1263],{"class":1259},[1245,4057,1266],{"class":1251},[1245,4059,1269],{"class":1251},[1245,4061,1273],{"class":1272},[1245,4063,1269],{"class":1251},[1245,4065,1278],{"class":1251},[1245,4067,4068,4070,4072,4074,4076,4079,4081,4083,4085,4087,4089,4091,4093,4095],{"class":1247,"line":1281},[1245,4069,1284],{"class":1259},[1245,4071,1287],{"class":1251},[1245,4073,2121],{"class":1290},[1245,4075,1371],{"class":1251},[1245,4077,4078],{"class":1290}," clear ",[1245,4080,1294],{"class":1251},[1245,4082,1297],{"class":1251},[1245,4084,1301],{"class":1300},[1245,4086,1305],{"class":1304},[1245,4088,1308],{"class":1290},[1245,4090,1311],{"class":1251},[1245,4092,3909],{"class":1272},[1245,4094,1311],{"class":1251},[1245,4096,1319],{"class":1290},[1245,4098,4099],{"class":1247,"line":1322},[1245,4100,1326],{"emptyLinePlaceholder":1325},[1245,4102,4103,4105,4108,4110,4112],{"class":1247,"line":1329},[1245,4104,1284],{"class":1259},[1245,4106,4107],{"class":1290}," route ",[1245,4109,1266],{"class":1251},[1245,4111,2485],{"class":1304},[1245,4113,2827],{"class":1290},[1245,4115,4116,4119,4121,4123,4125,4128,4130,4133,4135,4137,4139,4141,4143],{"class":1247,"line":1346},[1245,4117,4118],{"class":1304},"watch",[1245,4120,1308],{"class":1290},[1245,4122,1340],{"class":1251},[1245,4124,1886],{"class":1259},[1245,4126,4127],{"class":1290}," route",[1245,4129,1128],{"class":1251},[1245,4131,4132],{"class":1290},"path",[1245,4134,1371],{"class":1251},[1245,4136,3696],{"class":1251},[1245,4138,4132],{"class":1882},[1245,4140,1844],{"class":1251},[1245,4142,1886],{"class":1259},[1245,4144,1343],{"class":1251},[1245,4146,4147,4150,4152,4154,4157,4159,4161,4163,4166,4168],{"class":1247,"line":1376},[1245,4148,4149],{"class":1300},"  if",[1245,4151,3696],{"class":1255},[1245,4153,4132],{"class":1290},[1245,4155,4156],{"class":1251}," ===",[1245,4158,1385],{"class":1251},[1245,4160,2908],{"class":1272},[1245,4162,1311],{"class":1251},[1245,4164,4165],{"class":1255},") ",[1245,4167,2921],{"class":1304},[1245,4169,2827],{"class":1255},[1245,4171,4172,4174],{"class":1247,"line":1396},[1245,4173,1294],{"class":1251},[1245,4175,1319],{"class":1290},[1245,4177,4178,4180,4182],{"class":1247,"line":1406},[1245,4179,1436],{"class":1251},[1245,4181,1256],{"class":1255},[1245,4183,1278],{"class":1251},[3784,4185,4186],{"id":4118},"Watch",[1113,4188,4189,4190,4192,4193,4196],{},"To re-run your fetching function each time other reactive values in your application change, use the ",[1117,4191,4118],{}," option. You can use it for one or multiple ",[2999,4194,4195],{},"watchable"," elements.",[1236,4198,4200],{"className":1238,"code":4199,"language":1240,"meta":1627,"style":1241},"\u003Cscript setup lang=\"ts\">\nconst id = ref(1)\n\nconst { data, error, refresh } = await useFetch('/api/users', {\n  /* Changing the id will trigger a refetch */\n  watch: [id]\n})\n\u003C/script>\n",[1117,4201,4202,4222,4241,4245,4281,4286,4296,4302],{"__ignoreMap":1241},[1245,4203,4204,4206,4208,4210,4212,4214,4216,4218,4220],{"class":1247,"line":1248},[1245,4205,1252],{"class":1251},[1245,4207,1256],{"class":1255},[1245,4209,1260],{"class":1259},[1245,4211,1263],{"class":1259},[1245,4213,1266],{"class":1251},[1245,4215,1269],{"class":1251},[1245,4217,1273],{"class":1272},[1245,4219,1269],{"class":1251},[1245,4221,1278],{"class":1251},[1245,4223,4224,4226,4228,4230,4233,4235,4239],{"class":1247,"line":1281},[1245,4225,1284],{"class":1259},[1245,4227,2478],{"class":1290},[1245,4229,1266],{"class":1251},[1245,4231,4232],{"class":1304}," ref",[1245,4234,1308],{"class":1290},[1245,4236,4238],{"class":4237},"sV9sa","1",[1245,4240,1319],{"class":1290},[1245,4242,4243],{"class":1247,"line":1322},[1245,4244,1326],{"emptyLinePlaceholder":1325},[1245,4246,4247,4249,4251,4253,4255,4257,4259,4261,4263,4265,4267,4269,4271,4273,4275,4277,4279],{"class":1247,"line":1329},[1245,4248,1284],{"class":1259},[1245,4250,1287],{"class":1251},[1245,4252,2121],{"class":1290},[1245,4254,1371],{"class":1251},[1245,4256,3884],{"class":1290},[1245,4258,1371],{"class":1251},[1245,4260,3894],{"class":1290},[1245,4262,1294],{"class":1251},[1245,4264,1297],{"class":1251},[1245,4266,1301],{"class":1300},[1245,4268,1305],{"class":1304},[1245,4270,1308],{"class":1290},[1245,4272,1311],{"class":1251},[1245,4274,3909],{"class":1272},[1245,4276,1311],{"class":1251},[1245,4278,1371],{"class":1251},[1245,4280,1343],{"class":1251},[1245,4282,4283],{"class":1247,"line":1346},[1245,4284,4285],{"class":1409},"  /* Changing the id will trigger a refetch */\n",[1245,4287,4288,4291,4293],{"class":1247,"line":1376},[1245,4289,4290],{"class":1255},"  watch",[1245,4292,1382],{"class":1251},[1245,4294,4295],{"class":1290}," [id]\n",[1245,4297,4298,4300],{"class":1247,"line":1396},[1245,4299,1294],{"class":1251},[1245,4301,1319],{"class":1290},[1245,4303,4304,4306,4308],{"class":1247,"line":1406},[1245,4305,1436],{"class":1251},[1245,4307,1256],{"class":1255},[1245,4309,1278],{"class":1251},[1113,4311,4312,4313,4316],{},"Note that ",[1232,4314,4315],{},"watching a reactive value won't change the URL fetched",". For example, this will keep fetching the same initial ID of the user because the URL is constructed at the moment the function is invoked.",[1236,4318,4320],{"className":1238,"code":4319,"language":1240,"meta":1241,"style":1241},"\u003Cscript setup lang=\"ts\">\nconst id = ref(1)\n\nconst { data, error, refresh } = await useFetch(`/api/users/${id.value}`, {\n  watch: [id]\n})\n\u003C/script>\n",[1117,4321,4322,4342,4358,4362,4408,4416,4422],{"__ignoreMap":1241},[1245,4323,4324,4326,4328,4330,4332,4334,4336,4338,4340],{"class":1247,"line":1248},[1245,4325,1252],{"class":1251},[1245,4327,1256],{"class":1255},[1245,4329,1260],{"class":1259},[1245,4331,1263],{"class":1259},[1245,4333,1266],{"class":1251},[1245,4335,1269],{"class":1251},[1245,4337,1273],{"class":1272},[1245,4339,1269],{"class":1251},[1245,4341,1278],{"class":1251},[1245,4343,4344,4346,4348,4350,4352,4354,4356],{"class":1247,"line":1281},[1245,4345,1284],{"class":1259},[1245,4347,2478],{"class":1290},[1245,4349,1266],{"class":1251},[1245,4351,4232],{"class":1304},[1245,4353,1308],{"class":1290},[1245,4355,4238],{"class":4237},[1245,4357,1319],{"class":1290},[1245,4359,4360],{"class":1247,"line":1322},[1245,4361,1326],{"emptyLinePlaceholder":1325},[1245,4363,4364,4366,4368,4370,4372,4374,4376,4378,4380,4382,4384,4386,4388,4390,4393,4395,4397,4399,4402,4404,4406],{"class":1247,"line":1329},[1245,4365,1284],{"class":1259},[1245,4367,1287],{"class":1251},[1245,4369,2121],{"class":1290},[1245,4371,1371],{"class":1251},[1245,4373,3884],{"class":1290},[1245,4375,1371],{"class":1251},[1245,4377,3894],{"class":1290},[1245,4379,1294],{"class":1251},[1245,4381,1297],{"class":1251},[1245,4383,1301],{"class":1300},[1245,4385,1305],{"class":1304},[1245,4387,1308],{"class":1290},[1245,4389,2521],{"class":1251},[1245,4391,4392],{"class":1272},"/api/users/",[1245,4394,2527],{"class":1251},[1245,4396,2530],{"class":1290},[1245,4398,1128],{"class":1251},[1245,4400,4401],{"class":1290},"value",[1245,4403,2533],{"class":1251},[1245,4405,1371],{"class":1251},[1245,4407,1343],{"class":1251},[1245,4409,4410,4412,4414],{"class":1247,"line":1346},[1245,4411,4290],{"class":1255},[1245,4413,1382],{"class":1251},[1245,4415,4295],{"class":1290},[1245,4417,4418,4420],{"class":1247,"line":1376},[1245,4419,1294],{"class":1251},[1245,4421,1319],{"class":1290},[1245,4423,4424,4426,4428],{"class":1247,"line":1396},[1245,4425,1436],{"class":1251},[1245,4427,1256],{"class":1255},[1245,4429,1278],{"class":1251},[1113,4431,4432,4433,4437],{},"If you need to change the URL based on a reactive value, you may want to use a ",[1121,4434,4436],{"href":4435},"#computed-url","computed URL"," instead.",[3784,4439,4441],{"id":4440},"computed-url","Computed URL",[1113,4443,4444],{},"Sometimes you may need to compute an URL from reactive values, and refresh the data each time these change. Instead of juggling your way around, you can attach each param as a reactive value. Nuxt will automatically use the reactive value and re-fetch each time it changes.",[1236,4446,4448],{"className":1238,"code":4447,"language":1240,"meta":1241,"style":1241},"\u003Cscript setup lang=\"ts\">\nconst id = ref(null)\n\nconst { data, status } = useLazyFetch('/api/user', {\n  query: {\n    user_id: id\n  }\n})\n\u003C/script>\n",[1117,4449,4450,4470,4486,4490,4521,4530,4540,4544,4550],{"__ignoreMap":1241},[1245,4451,4452,4454,4456,4458,4460,4462,4464,4466,4468],{"class":1247,"line":1248},[1245,4453,1252],{"class":1251},[1245,4455,1256],{"class":1255},[1245,4457,1260],{"class":1259},[1245,4459,1263],{"class":1259},[1245,4461,1266],{"class":1251},[1245,4463,1269],{"class":1251},[1245,4465,1273],{"class":1272},[1245,4467,1269],{"class":1251},[1245,4469,1278],{"class":1251},[1245,4471,4472,4474,4476,4478,4480,4482,4484],{"class":1247,"line":1281},[1245,4473,1284],{"class":1259},[1245,4475,2478],{"class":1290},[1245,4477,1266],{"class":1251},[1245,4479,4232],{"class":1304},[1245,4481,1308],{"class":1290},[1245,4483,2935],{"class":1251},[1245,4485,1319],{"class":1290},[1245,4487,4488],{"class":1247,"line":1322},[1245,4489,1326],{"emptyLinePlaceholder":1325},[1245,4491,4492,4494,4496,4498,4500,4502,4504,4506,4508,4510,4512,4515,4517,4519],{"class":1247,"line":1329},[1245,4493,1284],{"class":1259},[1245,4495,1287],{"class":1251},[1245,4497,2121],{"class":1290},[1245,4499,1371],{"class":1251},[1245,4501,2631],{"class":1290},[1245,4503,1294],{"class":1251},[1245,4505,1297],{"class":1251},[1245,4507,3291],{"class":1304},[1245,4509,1308],{"class":1290},[1245,4511,1311],{"class":1251},[1245,4513,4514],{"class":1272},"/api/user",[1245,4516,1311],{"class":1251},[1245,4518,1371],{"class":1251},[1245,4520,1343],{"class":1251},[1245,4522,4523,4526,4528],{"class":1247,"line":1346},[1245,4524,4525],{"class":1255},"  query",[1245,4527,1382],{"class":1251},[1245,4529,1343],{"class":1251},[1245,4531,4532,4535,4537],{"class":1247,"line":1376},[1245,4533,4534],{"class":1255},"    user_id",[1245,4536,1382],{"class":1251},[1245,4538,4539],{"class":1290}," id\n",[1245,4541,4542],{"class":1247,"line":1396},[1245,4543,3763],{"class":1251},[1245,4545,4546,4548],{"class":1247,"line":1406},[1245,4547,1294],{"class":1251},[1245,4549,1319],{"class":1290},[1245,4551,4552,4554,4556],{"class":1247,"line":1413},[1245,4553,1436],{"class":1251},[1245,4555,1256],{"class":1255},[1245,4557,1278],{"class":1251},[1113,4559,4560,4561,4566],{},"In the case of more complex URL construction, you may use a callback as a ",[1121,4562,4565],{"href":4563,"rel":4564},"https://vuejs.org/guide/essentials/computed.html",[1228],"computed getter"," that returns the URL string.",[1113,4568,4569,4570,4573],{},"Every time a dependency changes, the data will be fetched using the newly constructed URL. Combine this with ",[1121,4571,4572],{"href":4015},"not-immediate",", and you can wait until the reactive element changes before fetching.",[1236,4575,4577],{"className":1238,"code":4576,"language":1240,"meta":1241,"style":1241},"\u003Cscript setup lang=\"ts\">\nconst id = ref(null)\n\nconst { data, status } = useLazyFetch(() => `/api/users/${id.value}`, {\n  immediate: false\n})\n\nconst pending = computed(() => status.value === 'pending');\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- disable the input while fetching -->\n    \u003Cinput v-model=\"id\" type=\"number\" :disabled=\"pending\"/>\n\n    \u003Cdiv v-if=\"status === 'idle'\">\n      Type an user ID\n    \u003C/div>\n\n    \u003Cdiv v-else-if=\"pending\">\n      Loading ...\n    \u003C/div>\n\n    \u003Cdiv v-else>\n      {{ data }}\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n",[1117,4578,4579,4599,4615,4619,4662,4671,4677,4681,4720,4728,4732,4740,4748,4753,4800,4804,4830,4835,4843,4847,4866,4871,4879,4883,4894,4905,4914,4923],{"__ignoreMap":1241},[1245,4580,4581,4583,4585,4587,4589,4591,4593,4595,4597],{"class":1247,"line":1248},[1245,4582,1252],{"class":1251},[1245,4584,1256],{"class":1255},[1245,4586,1260],{"class":1259},[1245,4588,1263],{"class":1259},[1245,4590,1266],{"class":1251},[1245,4592,1269],{"class":1251},[1245,4594,1273],{"class":1272},[1245,4596,1269],{"class":1251},[1245,4598,1278],{"class":1251},[1245,4600,4601,4603,4605,4607,4609,4611,4613],{"class":1247,"line":1281},[1245,4602,1284],{"class":1259},[1245,4604,2478],{"class":1290},[1245,4606,1266],{"class":1251},[1245,4608,4232],{"class":1304},[1245,4610,1308],{"class":1290},[1245,4612,2935],{"class":1251},[1245,4614,1319],{"class":1290},[1245,4616,4617],{"class":1247,"line":1322},[1245,4618,1326],{"emptyLinePlaceholder":1325},[1245,4620,4621,4623,4625,4627,4629,4631,4633,4635,4637,4639,4641,4643,4646,4648,4650,4652,4654,4656,4658,4660],{"class":1247,"line":1329},[1245,4622,1284],{"class":1259},[1245,4624,1287],{"class":1251},[1245,4626,2121],{"class":1290},[1245,4628,1371],{"class":1251},[1245,4630,2631],{"class":1290},[1245,4632,1294],{"class":1251},[1245,4634,1297],{"class":1251},[1245,4636,3291],{"class":1304},[1245,4638,1308],{"class":1290},[1245,4640,1340],{"class":1251},[1245,4642,1886],{"class":1259},[1245,4644,4645],{"class":1251}," `",[1245,4647,4392],{"class":1272},[1245,4649,2527],{"class":1251},[1245,4651,2530],{"class":1290},[1245,4653,1128],{"class":1251},[1245,4655,4401],{"class":1290},[1245,4657,2533],{"class":1251},[1245,4659,1371],{"class":1251},[1245,4661,1343],{"class":1251},[1245,4663,4664,4667,4669],{"class":1247,"line":1346},[1245,4665,4666],{"class":1255},"  immediate",[1245,4668,1382],{"class":1251},[1245,4670,3441],{"class":3110},[1245,4672,4673,4675],{"class":1247,"line":1376},[1245,4674,1294],{"class":1251},[1245,4676,1319],{"class":1290},[1245,4678,4679],{"class":1247,"line":1396},[1245,4680,1326],{"emptyLinePlaceholder":1325},[1245,4682,4683,4685,4688,4690,4693,4695,4697,4699,4701,4703,4706,4709,4711,4714,4716,4718],{"class":1247,"line":1406},[1245,4684,1284],{"class":1259},[1245,4686,4687],{"class":1290}," pending ",[1245,4689,1266],{"class":1251},[1245,4691,4692],{"class":1304}," computed",[1245,4694,1308],{"class":1290},[1245,4696,1340],{"class":1251},[1245,4698,1886],{"class":1259},[1245,4700,3072],{"class":1290},[1245,4702,1128],{"class":1251},[1245,4704,4705],{"class":1290},"value ",[1245,4707,4708],{"class":1251},"===",[1245,4710,1385],{"class":1251},[1245,4712,4713],{"class":1272},"pending",[1245,4715,1311],{"class":1251},[1245,4717,1844],{"class":1290},[1245,4719,1847],{"class":1251},[1245,4721,4722,4724,4726],{"class":1247,"line":1413},[1245,4723,1436],{"class":1251},[1245,4725,1256],{"class":1255},[1245,4727,1278],{"class":1251},[1245,4729,4730],{"class":1247,"line":1419},[1245,4731,1326],{"emptyLinePlaceholder":1325},[1245,4733,4734,4736,4738],{"class":1247,"line":1427},[1245,4735,1252],{"class":1251},[1245,4737,1453],{"class":1255},[1245,4739,1278],{"class":1251},[1245,4741,4742,4744,4746],{"class":1247,"line":1433},[1245,4743,1461],{"class":1251},[1245,4745,1464],{"class":1255},[1245,4747,1278],{"class":1251},[1245,4749,4750],{"class":1247,"line":1443},[1245,4751,4752],{"class":1409},"    \u003C!-- disable the input while fetching -->\n",[1245,4754,4755,4757,4760,4763,4765,4767,4769,4771,4774,4776,4778,4781,4783,4786,4789,4791,4793,4795,4797],{"class":1247,"line":1448},[1245,4756,1515],{"class":1251},[1245,4758,4759],{"class":1255},"input",[1245,4761,4762],{"class":1259}," v-model",[1245,4764,1266],{"class":1251},[1245,4766,1269],{"class":1251},[1245,4768,2530],{"class":1290},[1245,4770,1269],{"class":1251},[1245,4772,4773],{"class":1259}," type",[1245,4775,1266],{"class":1251},[1245,4777,1269],{"class":1251},[1245,4779,4780],{"class":1272},"number",[1245,4782,1269],{"class":1251},[1245,4784,4785],{"class":1251}," :",[1245,4787,4788],{"class":1259},"disabled",[1245,4790,1266],{"class":1251},[1245,4792,1269],{"class":1251},[1245,4794,4713],{"class":1290},[1245,4796,1269],{"class":1251},[1245,4798,4799],{"class":1251},"/>\n",[1245,4801,4802],{"class":1247,"line":1458},[1245,4803,1326],{"emptyLinePlaceholder":1325},[1245,4805,4806,4808,4810,4812,4814,4816,4818,4821,4823,4825,4828],{"class":1247,"line":1484},[1245,4807,1515],{"class":1251},[1245,4809,1464],{"class":1255},[1245,4811,1467],{"class":1300},[1245,4813,1266],{"class":1251},[1245,4815,1269],{"class":1251},[1245,4817,2938],{"class":1290},[1245,4819,4820],{"class":1251}," === ",[1245,4822,1311],{"class":1251},[1245,4824,2941],{"class":1272},[1245,4826,4827],{"class":1251},"'\"",[1245,4829,1278],{"class":1251},[1245,4831,4832],{"class":1247,"line":1490},[1245,4833,4834],{"class":1290},"      Type an user ID\n",[1245,4836,4837,4839,4841],{"class":1247,"line":1500},[1245,4838,1547],{"class":1251},[1245,4840,1464],{"class":1255},[1245,4842,1278],{"class":1251},[1245,4844,4845],{"class":1247,"line":1512},[1245,4846,1326],{"emptyLinePlaceholder":1325},[1245,4848,4849,4851,4853,4856,4858,4860,4862,4864],{"class":1247,"line":1538},[1245,4850,1515],{"class":1251},[1245,4852,1464],{"class":1255},[1245,4854,4855],{"class":1300}," v-else-if",[1245,4857,1266],{"class":1251},[1245,4859,1269],{"class":1251},[1245,4861,4713],{"class":1290},[1245,4863,1269],{"class":1251},[1245,4865,1278],{"class":1251},[1245,4867,4868],{"class":1247,"line":1544},[1245,4869,4870],{"class":1290},"      Loading ...\n",[1245,4872,4873,4875,4877],{"class":1247,"line":1554},[1245,4874,1547],{"class":1251},[1245,4876,1464],{"class":1255},[1245,4878,1278],{"class":1251},[1245,4880,4881],{"class":1247,"line":1563},[1245,4882,1326],{"emptyLinePlaceholder":1325},[1245,4884,4886,4888,4890,4892],{"class":1247,"line":4885},24,[1245,4887,1515],{"class":1251},[1245,4889,1464],{"class":1255},[1245,4891,1507],{"class":1300},[1245,4893,1278],{"class":1251},[1245,4895,4897,4900,4902],{"class":1247,"line":4896},25,[1245,4898,4899],{"class":1251},"      {{",[1245,4901,1291],{"class":1290},[1245,4903,4904],{"class":1251},"}}\n",[1245,4906,4908,4910,4912],{"class":1247,"line":4907},26,[1245,4909,1547],{"class":1251},[1245,4911,1464],{"class":1255},[1245,4913,1278],{"class":1251},[1245,4915,4917,4919,4921],{"class":1247,"line":4916},27,[1245,4918,1493],{"class":1251},[1245,4920,1464],{"class":1255},[1245,4922,1278],{"class":1251},[1245,4924,4926,4928,4930],{"class":1247,"line":4925},28,[1245,4927,1436],{"class":1251},[1245,4929,1453],{"class":1255},[1245,4931,1278],{"class":1251},[1113,4933,4934,4935,1128],{},"If you need to force a refresh when other reactive values change, you can also ",[1121,4936,4938],{"href":4937},"#watch","watch other values",[1580,4940,4941],{"id":4572},"Not immediate",[1113,4943,1195,4944,4946,4947,4950],{},[1117,4945,444],{}," composable will start fetching data the moment is invoked. You may prevent this by setting ",[1117,4948,4949],{},"immediate: false",", for example, to wait for user interaction.",[1113,4952,4953,4954,4956,4957,4959],{},"With that, you will need both the ",[1117,4955,2938],{}," to handle the fetch lifecycle, and ",[1117,4958,2911],{}," to start the data fetch.",[1236,4961,4963],{"className":1238,"code":4962,"language":1240,"meta":1241,"style":1241},"\u003Cscript setup lang=\"ts\">\nconst { data, error, execute, status } = await useLazyFetch('/api/comments', {\n  immediate: false\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv v-if=\"status === 'idle'\">\n    \u003Cbutton @click=\"execute\">Get data\u003C/button>\n  \u003C/div>\n\n  \u003Cdiv v-else-if=\"status === 'pending'\">\n    Loading comments...\n  \u003C/div>\n\n  \u003Cdiv v-else>\n    {{ data }}\n  \u003C/div>\n\u003C/template>\n",[1117,4964,4965,4985,5025,5033,5039,5047,5051,5059,5083,5113,5121,5125,5149,5154,5162,5166,5176,5185,5193],{"__ignoreMap":1241},[1245,4966,4967,4969,4971,4973,4975,4977,4979,4981,4983],{"class":1247,"line":1248},[1245,4968,1252],{"class":1251},[1245,4970,1256],{"class":1255},[1245,4972,1260],{"class":1259},[1245,4974,1263],{"class":1259},[1245,4976,1266],{"class":1251},[1245,4978,1269],{"class":1251},[1245,4980,1273],{"class":1272},[1245,4982,1269],{"class":1251},[1245,4984,1278],{"class":1251},[1245,4986,4987,4989,4991,4993,4995,4997,4999,5001,5003,5005,5007,5009,5011,5013,5015,5017,5019,5021,5023],{"class":1247,"line":1281},[1245,4988,1284],{"class":1259},[1245,4990,1287],{"class":1251},[1245,4992,2121],{"class":1290},[1245,4994,1371],{"class":1251},[1245,4996,3884],{"class":1290},[1245,4998,1371],{"class":1251},[1245,5000,3889],{"class":1290},[1245,5002,1371],{"class":1251},[1245,5004,2631],{"class":1290},[1245,5006,1294],{"class":1251},[1245,5008,1297],{"class":1251},[1245,5010,1301],{"class":1300},[1245,5012,3291],{"class":1304},[1245,5014,1308],{"class":1290},[1245,5016,1311],{"class":1251},[1245,5018,3414],{"class":1272},[1245,5020,1311],{"class":1251},[1245,5022,1371],{"class":1251},[1245,5024,1343],{"class":1251},[1245,5026,5027,5029,5031],{"class":1247,"line":1322},[1245,5028,4666],{"class":1255},[1245,5030,1382],{"class":1251},[1245,5032,3441],{"class":3110},[1245,5034,5035,5037],{"class":1247,"line":1329},[1245,5036,1294],{"class":1251},[1245,5038,1319],{"class":1290},[1245,5040,5041,5043,5045],{"class":1247,"line":1346},[1245,5042,1436],{"class":1251},[1245,5044,1256],{"class":1255},[1245,5046,1278],{"class":1251},[1245,5048,5049],{"class":1247,"line":1376},[1245,5050,1326],{"emptyLinePlaceholder":1325},[1245,5052,5053,5055,5057],{"class":1247,"line":1396},[1245,5054,1252],{"class":1251},[1245,5056,1453],{"class":1255},[1245,5058,1278],{"class":1251},[1245,5060,5061,5063,5065,5067,5069,5071,5073,5075,5077,5079,5081],{"class":1247,"line":1406},[1245,5062,1461],{"class":1251},[1245,5064,1464],{"class":1255},[1245,5066,1467],{"class":1300},[1245,5068,1266],{"class":1251},[1245,5070,1269],{"class":1251},[1245,5072,2938],{"class":1290},[1245,5074,4820],{"class":1251},[1245,5076,1311],{"class":1251},[1245,5078,2941],{"class":1272},[1245,5080,4827],{"class":1251},[1245,5082,1278],{"class":1251},[1245,5084,5085,5087,5089,5091,5094,5096,5098,5100,5102,5104,5107,5109,5111],{"class":1247,"line":1413},[1245,5086,1515],{"class":1251},[1245,5088,3965],{"class":1255},[1245,5090,1521],{"class":1251},[1245,5092,5093],{"class":1259},"click",[1245,5095,1266],{"class":1251},[1245,5097,1269],{"class":1251},[1245,5099,2911],{"class":1290},[1245,5101,1269],{"class":1251},[1245,5103,2174],{"class":1251},[1245,5105,5106],{"class":1290},"Get data",[1245,5108,1436],{"class":1251},[1245,5110,3965],{"class":1255},[1245,5112,1278],{"class":1251},[1245,5114,5115,5117,5119],{"class":1247,"line":1419},[1245,5116,1493],{"class":1251},[1245,5118,1464],{"class":1255},[1245,5120,1278],{"class":1251},[1245,5122,5123],{"class":1247,"line":1427},[1245,5124,1326],{"emptyLinePlaceholder":1325},[1245,5126,5127,5129,5131,5133,5135,5137,5139,5141,5143,5145,5147],{"class":1247,"line":1433},[1245,5128,1461],{"class":1251},[1245,5130,1464],{"class":1255},[1245,5132,4855],{"class":1300},[1245,5134,1266],{"class":1251},[1245,5136,1269],{"class":1251},[1245,5138,2938],{"class":1290},[1245,5140,4820],{"class":1251},[1245,5142,1311],{"class":1251},[1245,5144,4713],{"class":1272},[1245,5146,4827],{"class":1251},[1245,5148,1278],{"class":1251},[1245,5150,5151],{"class":1247,"line":1443},[1245,5152,5153],{"class":1290},"    Loading comments...\n",[1245,5155,5156,5158,5160],{"class":1247,"line":1448},[1245,5157,1493],{"class":1251},[1245,5159,1464],{"class":1255},[1245,5161,1278],{"class":1251},[1245,5163,5164],{"class":1247,"line":1458},[1245,5165,1326],{"emptyLinePlaceholder":1325},[1245,5167,5168,5170,5172,5174],{"class":1247,"line":1484},[1245,5169,1461],{"class":1251},[1245,5171,1464],{"class":1255},[1245,5173,1507],{"class":1300},[1245,5175,1278],{"class":1251},[1245,5177,5178,5181,5183],{"class":1247,"line":1490},[1245,5179,5180],{"class":1251},"    {{",[1245,5182,1291],{"class":1290},[1245,5184,4904],{"class":1251},[1245,5186,5187,5189,5191],{"class":1247,"line":1500},[1245,5188,1493],{"class":1251},[1245,5190,1464],{"class":1255},[1245,5192,1278],{"class":1251},[1245,5194,5195,5197,5199],{"class":1247,"line":1512},[1245,5196,1436],{"class":1251},[1245,5198,1453],{"class":1255},[1245,5200,1278],{"class":1251},[1113,5202,5203,5204,5206],{},"For finer control, the ",[1117,5205,2938],{}," variable can be:",[1133,5208,5209,5214,5219,5224],{},[1136,5210,5211,5213],{},[1117,5212,2941],{}," when the fetch hasn't started",[1136,5215,5216,5218],{},[1117,5217,4713],{}," when a fetch has started but not yet completed",[1136,5220,5221,5223],{},[1117,5222,2932],{}," when the fetch fails",[1136,5225,5226,5229],{},[1117,5227,5228],{},"success"," when the fetch is completed successfully",[1176,5231,5233],{"id":5232},"passing-headers-and-cookies","Passing Headers and Cookies",[1113,5235,5236,5237,5239,5240,5242],{},"When we call ",[1117,5238,547],{}," in the browser, user headers like ",[1117,5241,1906],{}," will be directly sent to the API.",[1113,5244,5245,5246,5248],{},"Normally, during server-side-rendering, due to security considerations, the ",[1117,5247,547],{}," wouldn't include the user's browser cookies, nor pass on cookies from the fetch response.",[1113,5250,5251,5252,5254,5255,5259,5260,1791],{},"However, when calling ",[1117,5253,444],{}," with a relative URL on the server, Nuxt will use ",[1121,5256,5257],{"href":489},[1117,5258,488],{}," to proxy headers and cookies (with the exception of headers not meant to be forwarded, like ",[1117,5261,1790],{},[1580,5263,5265],{"id":5264},"pass-cookies-from-server-side-api-calls-on-ssr-response","Pass Cookies From Server-side API Calls on SSR Response",[1113,5267,5268],{},"If you want to pass on/proxy cookies in the other direction, from an internal request back to the client, you will need to handle this yourself.",[1236,5270,5273],{"className":1858,"code":5271,"filename":5272,"language":1273,"meta":1241,"style":1241},"import { appendResponseHeader } from 'h3'\nimport type { H3Event } from 'h3'\n\nexport const fetchWithCookie = async (event: H3Event, url: string) => {\n  /* Get the response from the server endpoint */\n  const res = await $fetch.raw(url)\n  /* Get the cookies from the response */\n  const cookies = res.headers.getSetCookie()\n  /* Attach each cookie to our incoming Request */\n  for (const cookie of cookies) {\n    appendResponseHeader(event, 'set-cookie', cookie)\n  }\n  /* Return the data of the response */\n  return res._data\n}\n","composables/fetch.ts",[1117,5274,5275,5297,5318,5322,5360,5365,5389,5394,5417,5422,5444,5468,5472,5477,5488],{"__ignoreMap":1241},[1245,5276,5277,5280,5282,5285,5287,5290,5292,5294],{"class":1247,"line":1248},[1245,5278,5279],{"class":1300},"import",[1245,5281,1287],{"class":1251},[1245,5283,5284],{"class":1290}," appendResponseHeader",[1245,5286,2003],{"class":1251},[1245,5288,5289],{"class":1300}," from",[1245,5291,1385],{"class":1251},[1245,5293,1580],{"class":1272},[1245,5295,5296],{"class":1251},"'\n",[1245,5298,5299,5301,5303,5305,5308,5310,5312,5314,5316],{"class":1247,"line":1281},[1245,5300,5279],{"class":1300},[1245,5302,4773],{"class":1300},[1245,5304,1287],{"class":1251},[1245,5306,5307],{"class":1290}," H3Event",[1245,5309,2003],{"class":1251},[1245,5311,5289],{"class":1300},[1245,5313,1385],{"class":1251},[1245,5315,1580],{"class":1272},[1245,5317,5296],{"class":1251},[1245,5319,5320],{"class":1247,"line":1322},[1245,5321,1326],{"emptyLinePlaceholder":1325},[1245,5323,5324,5326,5329,5332,5334,5336,5338,5340,5342,5344,5346,5349,5351,5354,5356,5358],{"class":1247,"line":1329},[1245,5325,1871],{"class":1300},[1245,5327,5328],{"class":1259}," const",[1245,5330,5331],{"class":1290}," fetchWithCookie ",[1245,5333,1266],{"class":1251},[1245,5335,2653],{"class":1259},[1245,5337,3696],{"class":1251},[1245,5339,1883],{"class":1882},[1245,5341,1382],{"class":1251},[1245,5343,5307],{"class":2684},[1245,5345,1371],{"class":1251},[1245,5347,5348],{"class":1882}," url",[1245,5350,1382],{"class":1251},[1245,5352,5353],{"class":2684}," string",[1245,5355,1844],{"class":1251},[1245,5357,1886],{"class":1259},[1245,5359,1343],{"class":1251},[1245,5361,5362],{"class":1247,"line":1346},[1245,5363,5364],{"class":1409},"  /* Get the response from the server endpoint */\n",[1245,5366,5367,5369,5371,5373,5375,5377,5379,5382,5384,5387],{"class":1247,"line":1376},[1245,5368,1349],{"class":1259},[1245,5370,1352],{"class":1290},[1245,5372,1297],{"class":1251},[1245,5374,1301],{"class":1300},[1245,5376,1359],{"class":1290},[1245,5378,1128],{"class":1251},[1245,5380,5381],{"class":1304},"raw",[1245,5383,1308],{"class":1255},[1245,5385,5386],{"class":1290},"url",[1245,5388,1319],{"class":1255},[1245,5390,5391],{"class":1247,"line":1396},[1245,5392,5393],{"class":1409},"  /* Get the cookies from the response */\n",[1245,5395,5396,5398,5401,5403,5405,5407,5410,5412,5415],{"class":1247,"line":1406},[1245,5397,1349],{"class":1259},[1245,5399,5400],{"class":1290}," cookies",[1245,5402,1297],{"class":1251},[1245,5404,1352],{"class":1290},[1245,5406,1128],{"class":1251},[1245,5408,5409],{"class":1290},"headers",[1245,5411,1128],{"class":1251},[1245,5413,5414],{"class":1304},"getSetCookie",[1245,5416,2827],{"class":1255},[1245,5418,5419],{"class":1247,"line":1413},[1245,5420,5421],{"class":1409},"  /* Attach each cookie to our incoming Request */\n",[1245,5423,5424,5427,5429,5431,5434,5437,5439,5441],{"class":1247,"line":1419},[1245,5425,5426],{"class":1300},"  for",[1245,5428,3696],{"class":1255},[1245,5430,1284],{"class":1259},[1245,5432,5433],{"class":1290}," cookie",[1245,5435,5436],{"class":1251}," of",[1245,5438,5400],{"class":1290},[1245,5440,4165],{"class":1255},[1245,5442,5443],{"class":1251},"{\n",[1245,5445,5446,5449,5451,5453,5455,5457,5460,5462,5464,5466],{"class":1247,"line":1427},[1245,5447,5448],{"class":1304},"    appendResponseHeader",[1245,5450,1308],{"class":1255},[1245,5452,1883],{"class":1290},[1245,5454,1371],{"class":1251},[1245,5456,1385],{"class":1251},[1245,5458,5459],{"class":1272},"set-cookie",[1245,5461,1311],{"class":1251},[1245,5463,1371],{"class":1251},[1245,5465,5433],{"class":1290},[1245,5467,1319],{"class":1255},[1245,5469,5470],{"class":1247,"line":1433},[1245,5471,3763],{"class":1251},[1245,5473,5474],{"class":1247,"line":1443},[1245,5475,5476],{"class":1409},"  /* Return the data of the response */\n",[1245,5478,5479,5481,5483,5485],{"class":1247,"line":1448},[1245,5480,1980],{"class":1300},[1245,5482,1352],{"class":1290},[1245,5484,1128],{"class":1251},[1245,5486,5487],{"class":1290},"_data\n",[1245,5489,5490],{"class":1247,"line":1458},[1245,5491,1430],{"class":1251},[1236,5493,5495],{"className":1238,"code":5494,"language":1240,"meta":1241,"style":1241},"\u003Cscript setup lang=\"ts\">\n// This composable will automatically pass cookies to the client\nconst event = useRequestEvent()\n\nconst { data: result } = await useAsyncData(() => fetchWithCookie(event!, '/api/with-cookie'))\n\nonMounted(() => console.log(document.cookie))\n\u003C/script>\n",[1117,5496,5497,5517,5522,5536,5540,5585,5589,5616],{"__ignoreMap":1241},[1245,5498,5499,5501,5503,5505,5507,5509,5511,5513,5515],{"class":1247,"line":1248},[1245,5500,1252],{"class":1251},[1245,5502,1256],{"class":1255},[1245,5504,1260],{"class":1259},[1245,5506,1263],{"class":1259},[1245,5508,1266],{"class":1251},[1245,5510,1269],{"class":1251},[1245,5512,1273],{"class":1272},[1245,5514,1269],{"class":1251},[1245,5516,1278],{"class":1251},[1245,5518,5519],{"class":1247,"line":1281},[1245,5520,5521],{"class":1409},"// This composable will automatically pass cookies to the client\n",[1245,5523,5524,5526,5529,5531,5534],{"class":1247,"line":1322},[1245,5525,1284],{"class":1259},[1245,5527,5528],{"class":1290}," event ",[1245,5530,1266],{"class":1251},[1245,5532,5533],{"class":1304}," useRequestEvent",[1245,5535,2827],{"class":1290},[1245,5537,5538],{"class":1247,"line":1329},[1245,5539,1326],{"emptyLinePlaceholder":1325},[1245,5541,5542,5544,5546,5548,5550,5553,5555,5557,5559,5561,5563,5565,5567,5570,5573,5576,5578,5581,5583],{"class":1247,"line":1346},[1245,5543,1284],{"class":1259},[1245,5545,1287],{"class":1251},[1245,5547,2121],{"class":1255},[1245,5549,1382],{"class":1251},[1245,5551,5552],{"class":1290}," result ",[1245,5554,1294],{"class":1251},[1245,5556,1297],{"class":1251},[1245,5558,1301],{"class":1300},[1245,5560,2322],{"class":1304},[1245,5562,1308],{"class":1290},[1245,5564,1340],{"class":1251},[1245,5566,1886],{"class":1259},[1245,5568,5569],{"class":1304}," fetchWithCookie",[1245,5571,5572],{"class":1290},"(event",[1245,5574,5575],{"class":1251},"!,",[1245,5577,1385],{"class":1251},[1245,5579,5580],{"class":1272},"/api/with-cookie",[1245,5582,1311],{"class":1251},[1245,5584,2352],{"class":1290},[1245,5586,5587],{"class":1247,"line":1376},[1245,5588,1326],{"emptyLinePlaceholder":1325},[1245,5590,5591,5594,5596,5598,5600,5603,5605,5608,5611,5613],{"class":1247,"line":1396},[1245,5592,5593],{"class":1304},"onMounted",[1245,5595,1308],{"class":1290},[1245,5597,1340],{"class":1251},[1245,5599,1886],{"class":1259},[1245,5601,5602],{"class":1290}," console",[1245,5604,1128],{"class":1251},[1245,5606,5607],{"class":1304},"log",[1245,5609,5610],{"class":1290},"(document",[1245,5612,1128],{"class":1251},[1245,5614,5615],{"class":1290},"cookie))\n",[1245,5617,5618,5620,5622],{"class":1247,"line":1406},[1245,5619,1436],{"class":1251},[1245,5621,1256],{"class":1255},[1245,5623,1278],{"class":1251},[1176,5625,5627],{"id":5626},"options-api-support","Options API support",[1113,5629,5630,5631,5634,5635,5637],{},"Nuxt provides a way to perform ",[1117,5632,5633],{},"asyncData"," fetching within the Options API. You must wrap your component definition within ",[1117,5636,579],{}," for this to work.",[1236,5639,5641],{"className":1238,"code":5640,"language":1240,"meta":1241,"style":1241},"\u003Cscript>\nexport default defineNuxtComponent({\n  /* Use the fetchKey option to provide a unique key */\n  fetchKey: 'hello',\n  async asyncData () {\n    return {\n      hello: await $fetch('/api/hello')\n    }\n  }\n})\n\u003C/script>\n",[1117,5642,5643,5651,5664,5669,5685,5697,5703,5725,5729,5733,5739],{"__ignoreMap":1241},[1245,5644,5645,5647,5649],{"class":1247,"line":1248},[1245,5646,1252],{"class":1251},[1245,5648,1256],{"class":1255},[1245,5650,1278],{"class":1251},[1245,5652,5653,5655,5657,5660,5662],{"class":1247,"line":1281},[1245,5654,1871],{"class":1300},[1245,5656,1874],{"class":1300},[1245,5658,5659],{"class":1304}," defineNuxtComponent",[1245,5661,1308],{"class":1290},[1245,5663,5443],{"class":1251},[1245,5665,5666],{"class":1247,"line":1322},[1245,5667,5668],{"class":1409},"  /* Use the fetchKey option to provide a unique key */\n",[1245,5670,5671,5674,5676,5678,5681,5683],{"class":1247,"line":1329},[1245,5672,5673],{"class":1255},"  fetchKey",[1245,5675,1382],{"class":1251},[1245,5677,1385],{"class":1251},[1245,5679,5680],{"class":1272},"hello",[1245,5682,1311],{"class":1251},[1245,5684,1393],{"class":1251},[1245,5686,5687,5690,5693,5695],{"class":1247,"line":1346},[1245,5688,5689],{"class":1259},"  async",[1245,5691,5692],{"class":1255}," asyncData",[1245,5694,2336],{"class":1251},[1245,5696,1343],{"class":1251},[1245,5698,5699,5701],{"class":1247,"line":1376},[1245,5700,3710],{"class":1300},[1245,5702,1343],{"class":1251},[1245,5704,5705,5708,5710,5712,5714,5716,5718,5721,5723],{"class":1247,"line":1396},[1245,5706,5707],{"class":1255},"      hello",[1245,5709,1382],{"class":1251},[1245,5711,1301],{"class":1300},[1245,5713,1359],{"class":1304},[1245,5715,1308],{"class":1255},[1245,5717,1311],{"class":1251},[1245,5719,5720],{"class":1272},"/api/hello",[1245,5722,1311],{"class":1251},[1245,5724,1319],{"class":1255},[1245,5726,5727],{"class":1247,"line":1406},[1245,5728,1416],{"class":1251},[1245,5730,5731],{"class":1247,"line":1413},[1245,5732,3763],{"class":1251},[1245,5734,5735,5737],{"class":1247,"line":1419},[1245,5736,1294],{"class":1251},[1245,5738,1319],{"class":1290},[1245,5740,5741,5743,5745],{"class":1247,"line":1427},[1245,5742,1436],{"class":1251},[1245,5744,1256],{"class":1255},[1245,5746,1278],{"class":1251},[1596,5748,5749],{},[1113,5750,5751,5752,3843,5754,5757],{},"Using ",[1117,5753,2982],{},[1117,5755,5756],{},"\u003Cscript setup lang=\"ts\">"," are the recommended way of declaring Vue components in Nuxt 3.",[1766,5759],{"to":580},[1176,5761,5763],{"id":5762},"serializing-data-from-server-to-client","Serializing Data From Server to Client",[1113,5765,5766,5767,1125,5769,5771,5772,5775,5776,5783,5784,1119,5787,1119,5790,1119,5793,1125,5796,5799],{},"When using ",[1117,5768,432],{},[1117,5770,460],{}," to transfer data fetched on server to the client (as well as anything else that utilizes ",[1121,5773,5774],{"href":1210},"the Nuxt payload","), the payload is serialized with ",[1121,5777,5780],{"href":5778,"rel":5779},"https://github.com/Rich-Harris/devalue",[1228],[1117,5781,5782],{},"devalue",". This allows us to transfer not just basic JSON but also to serialize and revive/deserialize more advanced kinds of data, such as regular expressions, Dates, Map and Set, ",[1117,5785,5786],{},"ref",[1117,5788,5789],{},"reactive",[1117,5791,5792],{},"shallowRef",[1117,5794,5795],{},"shallowReactive",[1117,5797,5798],{},"NuxtError"," - and more.",[1113,5801,5802,5803,5807],{},"It is also possible to define your own serializer/deserializer for types that are not supported by Nuxt. You can read more in the ",[1121,5804,5805],{"href":1210},[1117,5806,472],{}," docs.",[1596,5809,5810],{},[1113,5811,5812,5813,5816,5817,3843,5819,5821],{},"Note that this ",[2999,5814,5815],{},"does not apply"," to data passed from your server routes when fetched with ",[1117,5818,547],{},[1117,5820,444],{}," - see the next section for more information.",[1176,5823,5825],{"id":5824},"serializing-data-from-api-routes","Serializing Data From API Routes",[1113,5827,5828,5829,5831,5832,5835,5836,1125,5838,5842],{},"When fetching data from the ",[1117,5830,219],{}," directory, the response is serialized using ",[1117,5833,5834],{},"JSON.stringify",". However, since serialization is limited to only JavaScript primitive types, Nuxt does its best to convert the return type of ",[1117,5837,547],{},[1121,5839,5840],{"href":445},[1117,5841,444],{}," to match the actual value.",[1766,5844,5847],{"to":5845,"icon":5846,"target":2206},"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#description","i-simple-icons-mdnwebdocs",[1113,5848,5849,5850,5852],{},"Learn more about ",[1117,5851,5834],{}," limitations.",[1580,5854,5856],{"id":5855},"example","Example",[1236,5858,5861],{"className":1858,"code":5859,"filename":5860,"language":1273,"meta":1241,"style":1241},"export default defineEventHandler(() => {\n  return new Date()\n})\n","server/api/foo.ts",[1117,5862,5863,5879,5891],{"__ignoreMap":1241},[1245,5864,5865,5867,5869,5871,5873,5875,5877],{"class":1247,"line":1248},[1245,5866,1871],{"class":1300},[1245,5868,1874],{"class":1300},[1245,5870,1877],{"class":1304},[1245,5872,1308],{"class":1290},[1245,5874,1340],{"class":1251},[1245,5876,1886],{"class":1259},[1245,5878,1343],{"class":1251},[1245,5880,5881,5883,5886,5889],{"class":1247,"line":1281},[1245,5882,1980],{"class":1300},[1245,5884,5885],{"class":1251}," new",[1245,5887,5888],{"class":1304}," Date",[1245,5890,2827],{"class":1255},[1245,5892,5893,5895],{"class":1247,"line":1322},[1245,5894,1294],{"class":1251},[1245,5896,1319],{"class":1290},[1236,5898,5900],{"className":1238,"code":5899,"filename":248,"language":1240,"meta":1241,"style":1241},"\u003Cscript setup lang=\"ts\">\n// Type of `data` is inferred as string even though we returned a Date object\nconst { data } = await useFetch('/api/foo')\n\u003C/script>\n",[1117,5901,5902,5922,5927,5954],{"__ignoreMap":1241},[1245,5903,5904,5906,5908,5910,5912,5914,5916,5918,5920],{"class":1247,"line":1248},[1245,5905,1252],{"class":1251},[1245,5907,1256],{"class":1255},[1245,5909,1260],{"class":1259},[1245,5911,1263],{"class":1259},[1245,5913,1266],{"class":1251},[1245,5915,1269],{"class":1251},[1245,5917,1273],{"class":1272},[1245,5919,1269],{"class":1251},[1245,5921,1278],{"class":1251},[1245,5923,5924],{"class":1247,"line":1281},[1245,5925,5926],{"class":1409},"// Type of `data` is inferred as string even though we returned a Date object\n",[1245,5928,5929,5931,5933,5935,5937,5939,5941,5943,5945,5947,5950,5952],{"class":1247,"line":1322},[1245,5930,1284],{"class":1259},[1245,5932,1287],{"class":1251},[1245,5934,1291],{"class":1290},[1245,5936,1294],{"class":1251},[1245,5938,1297],{"class":1251},[1245,5940,1301],{"class":1300},[1245,5942,1305],{"class":1304},[1245,5944,1308],{"class":1290},[1245,5946,1311],{"class":1251},[1245,5948,5949],{"class":1272},"/api/foo",[1245,5951,1311],{"class":1251},[1245,5953,1319],{"class":1290},[1245,5955,5956,5958,5960],{"class":1247,"line":1329},[1245,5957,1436],{"class":1251},[1245,5959,1256],{"class":1255},[1245,5961,1278],{"class":1251},[1580,5963,5965],{"id":5964},"custom-serializer-function","Custom serializer function",[1113,5967,5968,5969,5972,5973,5975],{},"To customize the serialization behavior, you can define a ",[1117,5970,5971],{},"toJSON"," function on your returned object. If you define a ",[1117,5974,5971],{}," method, Nuxt will respect the return type of the function and will not try to convert the types.",[1236,5977,5980],{"className":1858,"code":5978,"filename":5979,"language":1273,"meta":1241,"style":1241},"export default defineEventHandler(() => {\n  const data = {\n    createdAt: new Date(),\n\n    toJSON() {\n      return {\n        createdAt: {\n          year: this.createdAt.getFullYear(),\n          month: this.createdAt.getMonth(),\n          day: this.createdAt.getDate(),\n        },\n      }\n    },\n  }\n  return data\n})\n\n","server/api/bar.ts",[1117,5981,5982,5998,6008,6023,6027,6036,6043,6052,6074,6094,6114,6119,6124,6129,6133,6140],{"__ignoreMap":1241},[1245,5983,5984,5986,5988,5990,5992,5994,5996],{"class":1247,"line":1248},[1245,5985,1871],{"class":1300},[1245,5987,1874],{"class":1300},[1245,5989,1877],{"class":1304},[1245,5991,1308],{"class":1290},[1245,5993,1340],{"class":1251},[1245,5995,1886],{"class":1259},[1245,5997,1343],{"class":1251},[1245,5999,6000,6002,6004,6006],{"class":1247,"line":1281},[1245,6001,1349],{"class":1259},[1245,6003,2121],{"class":1290},[1245,6005,1297],{"class":1251},[1245,6007,1343],{"class":1251},[1245,6009,6010,6013,6015,6017,6019,6021],{"class":1247,"line":1322},[1245,6011,6012],{"class":1255},"    createdAt",[1245,6014,1382],{"class":1251},[1245,6016,5885],{"class":1251},[1245,6018,5888],{"class":1304},[1245,6020,1340],{"class":1255},[1245,6022,1393],{"class":1251},[1245,6024,6025],{"class":1247,"line":1329},[1245,6026,1326],{"emptyLinePlaceholder":1325},[1245,6028,6029,6032,6034],{"class":1247,"line":1346},[1245,6030,6031],{"class":1255},"    toJSON",[1245,6033,1340],{"class":1251},[1245,6035,1343],{"class":1251},[1245,6037,6038,6041],{"class":1247,"line":1376},[1245,6039,6040],{"class":1300},"      return",[1245,6042,1343],{"class":1251},[1245,6044,6045,6048,6050],{"class":1247,"line":1396},[1245,6046,6047],{"class":1255},"        createdAt",[1245,6049,1382],{"class":1251},[1245,6051,1343],{"class":1251},[1245,6053,6054,6057,6059,6062,6065,6067,6070,6072],{"class":1247,"line":1406},[1245,6055,6056],{"class":1255},"          year",[1245,6058,1382],{"class":1251},[1245,6060,6061],{"class":1251}," this.",[1245,6063,6064],{"class":1290},"createdAt",[1245,6066,1128],{"class":1251},[1245,6068,6069],{"class":1304},"getFullYear",[1245,6071,1340],{"class":1255},[1245,6073,1393],{"class":1251},[1245,6075,6076,6079,6081,6083,6085,6087,6090,6092],{"class":1247,"line":1413},[1245,6077,6078],{"class":1255},"          month",[1245,6080,1382],{"class":1251},[1245,6082,6061],{"class":1251},[1245,6084,6064],{"class":1290},[1245,6086,1128],{"class":1251},[1245,6088,6089],{"class":1304},"getMonth",[1245,6091,1340],{"class":1255},[1245,6093,1393],{"class":1251},[1245,6095,6096,6099,6101,6103,6105,6107,6110,6112],{"class":1247,"line":1419},[1245,6097,6098],{"class":1255},"          day",[1245,6100,1382],{"class":1251},[1245,6102,6061],{"class":1251},[1245,6104,6064],{"class":1290},[1245,6106,1128],{"class":1251},[1245,6108,6109],{"class":1304},"getDate",[1245,6111,1340],{"class":1255},[1245,6113,1393],{"class":1251},[1245,6115,6116],{"class":1247,"line":1427},[1245,6117,6118],{"class":1251},"        },\n",[1245,6120,6121],{"class":1247,"line":1433},[1245,6122,6123],{"class":1251},"      }\n",[1245,6125,6126],{"class":1247,"line":1443},[1245,6127,6128],{"class":1251},"    },\n",[1245,6130,6131],{"class":1247,"line":1448},[1245,6132,3763],{"class":1251},[1245,6134,6135,6137],{"class":1247,"line":1458},[1245,6136,1980],{"class":1300},[1245,6138,6139],{"class":1290}," data\n",[1245,6141,6142,6144],{"class":1247,"line":1484},[1245,6143,1294],{"class":1251},[1245,6145,1319],{"class":1290},[1236,6147,6149],{"className":1238,"code":6148,"filename":248,"language":1240,"meta":1241,"style":1241},"\u003Cscript setup lang=\"ts\">\n// Type of `data` is inferred as\n// {\n//   createdAt: {\n//     year: number\n//     month: number\n//     day: number\n//   }\n// }\nconst { data } = await useFetch('/api/bar')\n\u003C/script>\n",[1117,6150,6151,6171,6176,6181,6186,6191,6196,6201,6206,6211,6238],{"__ignoreMap":1241},[1245,6152,6153,6155,6157,6159,6161,6163,6165,6167,6169],{"class":1247,"line":1248},[1245,6154,1252],{"class":1251},[1245,6156,1256],{"class":1255},[1245,6158,1260],{"class":1259},[1245,6160,1263],{"class":1259},[1245,6162,1266],{"class":1251},[1245,6164,1269],{"class":1251},[1245,6166,1273],{"class":1272},[1245,6168,1269],{"class":1251},[1245,6170,1278],{"class":1251},[1245,6172,6173],{"class":1247,"line":1281},[1245,6174,6175],{"class":1409},"// Type of `data` is inferred as\n",[1245,6177,6178],{"class":1247,"line":1322},[1245,6179,6180],{"class":1409},"// {\n",[1245,6182,6183],{"class":1247,"line":1329},[1245,6184,6185],{"class":1409},"//   createdAt: {\n",[1245,6187,6188],{"class":1247,"line":1346},[1245,6189,6190],{"class":1409},"//     year: number\n",[1245,6192,6193],{"class":1247,"line":1376},[1245,6194,6195],{"class":1409},"//     month: number\n",[1245,6197,6198],{"class":1247,"line":1396},[1245,6199,6200],{"class":1409},"//     day: number\n",[1245,6202,6203],{"class":1247,"line":1406},[1245,6204,6205],{"class":1409},"//   }\n",[1245,6207,6208],{"class":1247,"line":1413},[1245,6209,6210],{"class":1409},"// }\n",[1245,6212,6213,6215,6217,6219,6221,6223,6225,6227,6229,6231,6234,6236],{"class":1247,"line":1419},[1245,6214,1284],{"class":1259},[1245,6216,1287],{"class":1251},[1245,6218,1291],{"class":1290},[1245,6220,1294],{"class":1251},[1245,6222,1297],{"class":1251},[1245,6224,1301],{"class":1300},[1245,6226,1305],{"class":1304},[1245,6228,1308],{"class":1290},[1245,6230,1311],{"class":1251},[1245,6232,6233],{"class":1272},"/api/bar",[1245,6235,1311],{"class":1251},[1245,6237,1319],{"class":1290},[1245,6239,6240,6242,6244],{"class":1247,"line":1427},[1245,6241,1436],{"class":1251},[1245,6243,1256],{"class":1255},[1245,6245,1278],{"class":1251},[1580,6247,6249],{"id":6248},"using-an-alternative-serializer","Using an alternative serializer",[1113,6251,6252,6253,6255,6256,6258],{},"Nuxt does not currently support an alternative serializer to ",[1117,6254,5834],{},". However, you can return your payload as a normal string and utilize the ",[1117,6257,5971],{}," method to maintain type safety.",[1113,6260,6261,6262,6267],{},"In the example below, we use ",[1121,6263,6266],{"href":6264,"rel":6265},"https://github.com/blitz-js/superjson",[1228],"superjson"," as our serializer.",[1236,6269,6272],{"className":1858,"code":6270,"filename":6271,"language":1273,"meta":1241,"style":1241},"import superjson from 'superjson'\n\nexport default defineEventHandler(() => {\n  const data = {\n    createdAt: new Date(),\n\n    // Workaround the type conversion\n    toJSON() {\n      return this\n    }\n  }\n\n  // Serialize the output to string, using superjson\n  return superjson.stringify(data) as unknown as typeof data\n})\n","server/api/superjson.ts",[1117,6273,6274,6290,6294,6310,6320,6334,6338,6343,6351,6358,6362,6366,6370,6375,6407],{"__ignoreMap":1241},[1245,6275,6276,6278,6281,6284,6286,6288],{"class":1247,"line":1248},[1245,6277,5279],{"class":1300},[1245,6279,6280],{"class":1290}," superjson ",[1245,6282,6283],{"class":1300},"from",[1245,6285,1385],{"class":1251},[1245,6287,6266],{"class":1272},[1245,6289,5296],{"class":1251},[1245,6291,6292],{"class":1247,"line":1281},[1245,6293,1326],{"emptyLinePlaceholder":1325},[1245,6295,6296,6298,6300,6302,6304,6306,6308],{"class":1247,"line":1322},[1245,6297,1871],{"class":1300},[1245,6299,1874],{"class":1300},[1245,6301,1877],{"class":1304},[1245,6303,1308],{"class":1290},[1245,6305,1340],{"class":1251},[1245,6307,1886],{"class":1259},[1245,6309,1343],{"class":1251},[1245,6311,6312,6314,6316,6318],{"class":1247,"line":1329},[1245,6313,1349],{"class":1259},[1245,6315,2121],{"class":1290},[1245,6317,1297],{"class":1251},[1245,6319,1343],{"class":1251},[1245,6321,6322,6324,6326,6328,6330,6332],{"class":1247,"line":1346},[1245,6323,6012],{"class":1255},[1245,6325,1382],{"class":1251},[1245,6327,5885],{"class":1251},[1245,6329,5888],{"class":1304},[1245,6331,1340],{"class":1255},[1245,6333,1393],{"class":1251},[1245,6335,6336],{"class":1247,"line":1376},[1245,6337,1326],{"emptyLinePlaceholder":1325},[1245,6339,6340],{"class":1247,"line":1396},[1245,6341,6342],{"class":1409},"    // Workaround the type conversion\n",[1245,6344,6345,6347,6349],{"class":1247,"line":1406},[1245,6346,6031],{"class":1255},[1245,6348,1340],{"class":1251},[1245,6350,1343],{"class":1251},[1245,6352,6353,6355],{"class":1247,"line":1413},[1245,6354,6040],{"class":1300},[1245,6356,6357],{"class":1251}," this\n",[1245,6359,6360],{"class":1247,"line":1419},[1245,6361,1416],{"class":1251},[1245,6363,6364],{"class":1247,"line":1427},[1245,6365,3763],{"class":1251},[1245,6367,6368],{"class":1247,"line":1433},[1245,6369,1326],{"emptyLinePlaceholder":1325},[1245,6371,6372],{"class":1247,"line":1443},[1245,6373,6374],{"class":1409},"  // Serialize the output to string, using superjson\n",[1245,6376,6377,6379,6382,6384,6387,6389,6391,6393,6396,6399,6402,6405],{"class":1247,"line":1448},[1245,6378,1980],{"class":1300},[1245,6380,6381],{"class":1290}," superjson",[1245,6383,1128],{"class":1251},[1245,6385,6386],{"class":1304},"stringify",[1245,6388,1308],{"class":1255},[1245,6390,1474],{"class":1290},[1245,6392,4165],{"class":1255},[1245,6394,6395],{"class":1300},"as",[1245,6397,6398],{"class":2684}," unknown",[1245,6400,6401],{"class":1300}," as",[1245,6403,6404],{"class":1251}," typeof",[1245,6406,6139],{"class":1290},[1245,6408,6409,6411],{"class":1247,"line":1458},[1245,6410,1294],{"class":1251},[1245,6412,1319],{"class":1290},[1236,6414,6416],{"className":1238,"code":6415,"filename":248,"language":1240,"meta":1241,"style":1241},"\u003Cscript setup lang=\"ts\">\nimport superjson from 'superjson'\n\n// `date` is inferred as { createdAt: Date } and you can safely use the Date object methods\nconst { data } = await useFetch('/api/superjson', {\n  transform: (value) => {\n    return superjson.parse(value as unknown as string)\n  },\n})\n\u003C/script>\n",[1117,6417,6418,6438,6452,6456,6461,6490,6506,6531,6536,6542],{"__ignoreMap":1241},[1245,6419,6420,6422,6424,6426,6428,6430,6432,6434,6436],{"class":1247,"line":1248},[1245,6421,1252],{"class":1251},[1245,6423,1256],{"class":1255},[1245,6425,1260],{"class":1259},[1245,6427,1263],{"class":1259},[1245,6429,1266],{"class":1251},[1245,6431,1269],{"class":1251},[1245,6433,1273],{"class":1272},[1245,6435,1269],{"class":1251},[1245,6437,1278],{"class":1251},[1245,6439,6440,6442,6444,6446,6448,6450],{"class":1247,"line":1281},[1245,6441,5279],{"class":1300},[1245,6443,6280],{"class":1290},[1245,6445,6283],{"class":1300},[1245,6447,1385],{"class":1251},[1245,6449,6266],{"class":1272},[1245,6451,5296],{"class":1251},[1245,6453,6454],{"class":1247,"line":1322},[1245,6455,1326],{"emptyLinePlaceholder":1325},[1245,6457,6458],{"class":1247,"line":1329},[1245,6459,6460],{"class":1409},"// `date` is inferred as { createdAt: Date } and you can safely use the Date object methods\n",[1245,6462,6463,6465,6467,6469,6471,6473,6475,6477,6479,6481,6484,6486,6488],{"class":1247,"line":1346},[1245,6464,1284],{"class":1259},[1245,6466,1287],{"class":1251},[1245,6468,1291],{"class":1290},[1245,6470,1294],{"class":1251},[1245,6472,1297],{"class":1251},[1245,6474,1301],{"class":1300},[1245,6476,1305],{"class":1304},[1245,6478,1308],{"class":1290},[1245,6480,1311],{"class":1251},[1245,6482,6483],{"class":1272},"/api/superjson",[1245,6485,1311],{"class":1251},[1245,6487,1371],{"class":1251},[1245,6489,1343],{"class":1251},[1245,6491,6492,6494,6496,6498,6500,6502,6504],{"class":1247,"line":1376},[1245,6493,3691],{"class":1304},[1245,6495,1382],{"class":1251},[1245,6497,3696],{"class":1251},[1245,6499,4401],{"class":1882},[1245,6501,1844],{"class":1251},[1245,6503,1886],{"class":1259},[1245,6505,1343],{"class":1251},[1245,6507,6508,6510,6512,6514,6517,6519,6521,6523,6525,6527,6529],{"class":1247,"line":1396},[1245,6509,3710],{"class":1300},[1245,6511,6381],{"class":1290},[1245,6513,1128],{"class":1251},[1245,6515,6516],{"class":1304},"parse",[1245,6518,1308],{"class":1255},[1245,6520,4401],{"class":1290},[1245,6522,6401],{"class":1300},[1245,6524,6398],{"class":2684},[1245,6526,6401],{"class":1300},[1245,6528,5353],{"class":2684},[1245,6530,1319],{"class":1255},[1245,6532,6533],{"class":1247,"line":1406},[1245,6534,6535],{"class":1251},"  },\n",[1245,6537,6538,6540],{"class":1247,"line":1413},[1245,6539,1294],{"class":1251},[1245,6541,1319],{"class":1290},[1245,6543,6544,6546,6548],{"class":1247,"line":1419},[1245,6545,1436],{"class":1251},[1245,6547,1256],{"class":1255},[1245,6549,1278],{"class":1251},[1176,6551,323],{"id":6552},"recipes",[1580,6554,6556],{"id":6555},"consuming-sse-server-sent-events-via-post-request","Consuming SSE (Server Sent Events) via POST request",[1219,6558,6559],{},[1113,6560,6561,6562,6569,6570,1128],{},"If you're consuming SSE via GET request, you can use ",[1121,6563,6566],{"href":6564,"rel":6565},"https://developer.mozilla.org/en-US/docs/Web/API/EventSource",[1228],[1117,6567,6568],{},"EventSource"," or VueUse composable ",[1121,6571,6574],{"href":6572,"rel":6573},"https://vueuse.org/core/useEventSource/",[1228],[1117,6575,6576],{},"useEventSource",[1113,6578,6579],{},"When consuming SSE via POST request, you need to handle the connection manually. Here's how you can do it:",[1236,6581,6583],{"className":1858,"code":6582,"language":1273,"meta":1241,"style":1241},"// Make a POST request to the SSE endpoint\nconst response = await $fetch\u003CReadableStream>('/chats/ask-ai', {\n  method: 'POST',\n  body: {\n    query: \"Hello AI, how are you?\",\n  },\n  responseType: 'stream',\n})\n\n// Create a new ReadableStream from the response with TextDecoderStream to get the data as text\nconst reader = response.pipeThrough(new TextDecoderStream()).getReader()\n\n// Read the chunk of data as we get it\nwhile (true) {\n  const { value, done } = await reader.read()\n\n  if (done)\n    break\n\n  console.log('Received:', value)\n}\n",[1117,6584,6585,6590,6623,6638,6647,6664,6668,6684,6690,6694,6699,6734,6738,6743,6757,6787,6791,6802,6807,6811,6835],{"__ignoreMap":1241},[1245,6586,6587],{"class":1247,"line":1248},[1245,6588,6589],{"class":1409},"// Make a POST request to the SSE endpoint\n",[1245,6591,6592,6594,6597,6599,6601,6603,6605,6608,6610,6612,6614,6617,6619,6621],{"class":1247,"line":1281},[1245,6593,1284],{"class":1259},[1245,6595,6596],{"class":1290}," response ",[1245,6598,1266],{"class":1251},[1245,6600,1301],{"class":1300},[1245,6602,1359],{"class":1304},[1245,6604,1252],{"class":1251},[1245,6606,6607],{"class":2684},"ReadableStream",[1245,6609,2174],{"class":1251},[1245,6611,1308],{"class":1290},[1245,6613,1311],{"class":1251},[1245,6615,6616],{"class":1272},"/chats/ask-ai",[1245,6618,1311],{"class":1251},[1245,6620,1371],{"class":1251},[1245,6622,1343],{"class":1251},[1245,6624,6625,6628,6630,6632,6634,6636],{"class":1247,"line":1322},[1245,6626,6627],{"class":1255},"  method",[1245,6629,1382],{"class":1251},[1245,6631,1385],{"class":1251},[1245,6633,1388],{"class":1272},[1245,6635,1311],{"class":1251},[1245,6637,1393],{"class":1251},[1245,6639,6640,6643,6645],{"class":1247,"line":1329},[1245,6641,6642],{"class":1255},"  body",[1245,6644,1382],{"class":1251},[1245,6646,1343],{"class":1251},[1245,6648,6649,6652,6654,6657,6660,6662],{"class":1247,"line":1346},[1245,6650,6651],{"class":1255},"    query",[1245,6653,1382],{"class":1251},[1245,6655,6656],{"class":1251}," \"",[1245,6658,6659],{"class":1272},"Hello AI, how are you?",[1245,6661,1269],{"class":1251},[1245,6663,1393],{"class":1251},[1245,6665,6666],{"class":1247,"line":1376},[1245,6667,6535],{"class":1251},[1245,6669,6670,6673,6675,6677,6680,6682],{"class":1247,"line":1396},[1245,6671,6672],{"class":1255},"  responseType",[1245,6674,1382],{"class":1251},[1245,6676,1385],{"class":1251},[1245,6678,6679],{"class":1272},"stream",[1245,6681,1311],{"class":1251},[1245,6683,1393],{"class":1251},[1245,6685,6686,6688],{"class":1247,"line":1406},[1245,6687,1294],{"class":1251},[1245,6689,1319],{"class":1290},[1245,6691,6692],{"class":1247,"line":1413},[1245,6693,1326],{"emptyLinePlaceholder":1325},[1245,6695,6696],{"class":1247,"line":1419},[1245,6697,6698],{"class":1409},"// Create a new ReadableStream from the response with TextDecoderStream to get the data as text\n",[1245,6700,6701,6703,6706,6708,6711,6713,6716,6718,6721,6724,6727,6729,6732],{"class":1247,"line":1427},[1245,6702,1284],{"class":1259},[1245,6704,6705],{"class":1290}," reader ",[1245,6707,1266],{"class":1251},[1245,6709,6710],{"class":1290}," response",[1245,6712,1128],{"class":1251},[1245,6714,6715],{"class":1304},"pipeThrough",[1245,6717,1308],{"class":1290},[1245,6719,6720],{"class":1251},"new",[1245,6722,6723],{"class":1304}," TextDecoderStream",[1245,6725,6726],{"class":1290},"())",[1245,6728,1128],{"class":1251},[1245,6730,6731],{"class":1304},"getReader",[1245,6733,2827],{"class":1290},[1245,6735,6736],{"class":1247,"line":1433},[1245,6737,1326],{"emptyLinePlaceholder":1325},[1245,6739,6740],{"class":1247,"line":1443},[1245,6741,6742],{"class":1409},"// Read the chunk of data as we get it\n",[1245,6744,6745,6748,6750,6753,6755],{"class":1247,"line":1448},[1245,6746,6747],{"class":1300},"while",[1245,6749,3696],{"class":1290},[1245,6751,6752],{"class":3110},"true",[1245,6754,4165],{"class":1290},[1245,6756,5443],{"class":1251},[1245,6758,6759,6761,6763,6766,6768,6771,6773,6775,6777,6780,6782,6785],{"class":1247,"line":1458},[1245,6760,1349],{"class":1259},[1245,6762,1287],{"class":1251},[1245,6764,6765],{"class":1290}," value",[1245,6767,1371],{"class":1251},[1245,6769,6770],{"class":1290}," done",[1245,6772,2003],{"class":1251},[1245,6774,1297],{"class":1251},[1245,6776,1301],{"class":1300},[1245,6778,6779],{"class":1290}," reader",[1245,6781,1128],{"class":1251},[1245,6783,6784],{"class":1304},"read",[1245,6786,2827],{"class":1255},[1245,6788,6789],{"class":1247,"line":1484},[1245,6790,1326],{"emptyLinePlaceholder":1325},[1245,6792,6793,6795,6797,6800],{"class":1247,"line":1490},[1245,6794,4149],{"class":1300},[1245,6796,3696],{"class":1255},[1245,6798,6799],{"class":1290},"done",[1245,6801,1319],{"class":1255},[1245,6803,6804],{"class":1247,"line":1500},[1245,6805,6806],{"class":1300},"    break\n",[1245,6808,6809],{"class":1247,"line":1512},[1245,6810,1326],{"emptyLinePlaceholder":1325},[1245,6812,6813,6816,6818,6820,6822,6824,6827,6829,6831,6833],{"class":1247,"line":1538},[1245,6814,6815],{"class":1290},"  console",[1245,6817,1128],{"class":1251},[1245,6819,5607],{"class":1304},[1245,6821,1308],{"class":1255},[1245,6823,1311],{"class":1251},[1245,6825,6826],{"class":1272},"Received:",[1245,6828,1311],{"class":1251},[1245,6830,1371],{"class":1251},[1245,6832,6765],{"class":1290},[1245,6834,1319],{"class":1255},[1245,6836,6837],{"class":1247,"line":1544},[1245,6838,1430],{"class":1251},[6840,6841,6842],"style",{},"html pre.shiki code .sYp4K, html code.shiki .sYp4K{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sQ5dg, html code.shiki .sQ5dg{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sRBFq, html code.shiki .sRBFq{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .s5UST, html code.shiki .s5UST{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .spdxX, html code.shiki .spdxX{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .sFVN2, html code.shiki .sFVN2{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .szd4z, html code.shiki .szd4z{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .svXlt, html code.shiki .svXlt{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}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 .ssYd4, html code.shiki .ssYd4{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sT2Ow, html code.shiki .sT2Ow{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .sV9sa, html code.shiki .sV9sa{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}html pre.shiki code .sagxc, html code.shiki .sagxc{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}",{"title":1241,"searchDepth":1281,"depth":1281,"links":6844},[6845,6849,6852,6853,6854,6855,6862,6865,6866,6867,6872],{"id":1178,"depth":1281,"text":6846,"children":6847},"The need for useFetch and useAsyncData",[6848],{"id":1582,"depth":1322,"text":1583},{"id":1608,"depth":1281,"text":547,"children":6850},[6851],{"id":1775,"depth":1322,"text":1776},{"id":2075,"depth":1281,"text":444},{"id":2221,"depth":1281,"text":432},{"id":2887,"depth":1281,"text":2888},{"id":3013,"depth":1281,"text":3014,"children":6856},[6857,6858,6859,6860,6861],{"id":3028,"depth":1322,"text":3029},{"id":3324,"depth":1322,"text":3325},{"id":3461,"depth":1322,"text":3462},{"id":3781,"depth":1322,"text":3782},{"id":4572,"depth":1322,"text":4941},{"id":5232,"depth":1281,"text":5233,"children":6863},[6864],{"id":5264,"depth":1322,"text":5265},{"id":5626,"depth":1281,"text":5627},{"id":5762,"depth":1281,"text":5763},{"id":5824,"depth":1281,"text":5825,"children":6868},[6869,6870,6871],{"id":5855,"depth":1322,"text":5856},{"id":5964,"depth":1322,"text":5965},{"id":6248,"depth":1322,"text":6249},{"id":6552,"depth":1281,"text":323,"children":6873},[6874],{"id":6555,"depth":1322,"text":6556},"Nuxt provides composables to handle data fetching within your application.","md",{},{"icon":67},{"title":64,"description":6875},"B5nyh9aAZq",[6882,6884],{"title":59,"path":60,"stem":61,"description":6883,"icon":62,"children":-1},"Apply transitions between pages and layouts with Vue or native browser View Transitions.",{"title":69,"path":70,"stem":71,"description":6885,"icon":72,"children":-1},"Nuxt provides powerful state management libraries and the useState composable to create a reactive and SSR-friendly shared state.",1742651353889]