[{"data":1,"prerenderedAt":2860},["ShallowReactive",2],{"navigation":3,"-blog-understanding-how-fetch-works-in-nuxt-2-12":1107,"-blog-understanding-how-fetch-works-in-nuxt-2-12-surround":2855},[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":1096,"authors":1109,"body":1116,"category":2847,"date":2848,"description":2849,"draft":108,"extension":2850,"image":2851,"meta":2852,"navigation":1721,"path":1097,"seo":2853,"stem":1098,"tags":6,"__hash__":2854},"blog/blog/7.understanding-how-fetch-works-in-nuxt-2-12.md",[1110],{"name":1111,"avatar":1112,"to":1114,"twitter":1115},"Krutie Patel",{"src":1113},"https://github.com/Krutie.png","https://x.com/KrutiePatel","KrutiePatel",{"type":1117,"value":1118,"toc":2816},"minimal",[1119,1128,1131,1136,1153,1160,1169,1239,1242,1247,1253,1260,1264,1291,1294,1298,1304,1309,1325,1329,1334,1337,1343,1347,1350,1353,1357,1360,1389,1404,1407,1413,1420,1426,1434,1437,1461,1464,1602,1617,1881,1887,1891,1894,1933,1990,1994,2005,2016,2029,2080,2089,2094,2121,2131,2140,2225,2229,2239,2251,2254,2273,2387,2391,2410,2530,2534,2540,2548,2556,2569,2576,2588,2596,2605,2616,2654,2662,2704,2710,2715,2720,2726,2733,2741,2750,2754,2763,2773,2776,2783,2796,2800,2803,2806,2812],[1120,1121,1122,1123,1127],"p",{},"Nuxt introduces a new ",[1124,1125,1126],"code",{},"fetch"," with the latest release of version 2.12. Fetch provides a brand new way to bring data into Nuxt applications.",[1120,1129,1130],{},"In this post, we will explore different features of the fetch hook and try to understand how it works.",[1132,1133,1135],"h2",{"id":1134},"fetch-hook-and-nuxt-lifecycle","Fetch Hook and Nuxt Lifecycle",[1120,1137,1138,1139,1141,1142,1145,1146,1149,1150,1152],{},"In terms of Nuxt lifecycle hooks, ",[1124,1140,1126],{}," sits within Vue lifecycle after ",[1124,1143,1144],{},"created"," hook. As we already know that, all Vue lifecycle hooks are called with their ",[1124,1147,1148],{},"this"," context. The same applies to ",[1124,1151,1126],{}," hook as well.",[1120,1154,1155],{},[1156,1157],"img",{"alt":1158,"src":1159},"New fetch in Nuxt lifecycle","/assets/blog/new-fetch-lifecycle-hooks.png",[1120,1161,1162,1163,1165,1166,1168],{},"Fetch hook is called after the component instance is created on the server-side. That makes ",[1124,1164,1148],{}," context available inside the ",[1124,1167,1126],{},".",[1170,1171,1176],"pre",{"className":1172,"code":1173,"language":1174,"meta":1175,"style":1175},"language-js shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","export default {\n  fetch() {\n    console.log(this)\n  }\n}\n","js","",[1124,1177,1178,1194,1206,1227,1233],{"__ignoreMap":1175},[1179,1180,1183,1187,1190],"span",{"class":1181,"line":1182},"line",1,[1179,1184,1186],{"class":1185},"sFVN2","export",[1179,1188,1189],{"class":1185}," default",[1179,1191,1193],{"class":1192},"sYp4K"," {\n",[1179,1195,1197,1201,1204],{"class":1181,"line":1196},2,[1179,1198,1200],{"class":1199},"sQ5dg","  fetch",[1179,1202,1203],{"class":1192},"()",[1179,1205,1193],{"class":1192},[1179,1207,1209,1213,1215,1219,1222,1224],{"class":1181,"line":1208},3,[1179,1210,1212],{"class":1211},"spdxX","    console",[1179,1214,1168],{"class":1192},[1179,1216,1218],{"class":1217},"szd4z","log",[1179,1220,1221],{"class":1199},"(",[1179,1223,1148],{"class":1192},[1179,1225,1226],{"class":1199},")\n",[1179,1228,1230],{"class":1181,"line":1229},4,[1179,1231,1232],{"class":1192},"  }\n",[1179,1234,1236],{"class":1181,"line":1235},5,[1179,1237,1238],{"class":1192},"}\n",[1120,1240,1241],{},"Let’s see what this could mean for page components.",[1243,1244,1246],"h3",{"id":1245},"page-components","Page Components",[1120,1248,1249,1250,1252],{},"With the help of ",[1124,1251,1148],{}," context, fetch is able to mutate component’s data directly. It means we can set the component’s local data without having to dispatch Vuex store action or committing mutation from the page component.",[1120,1254,1255,1256,1259],{},"As a result, Vuex becomes optional, but not impossible. We can still use ",[1124,1257,1258],{},"this.$store"," as usual to access Vuex store if required.",[1132,1261,1263],{"id":1262},"availability-of-fetch-hook","Availability of fetch hook",[1120,1265,1266,1267,1269,1270,1274,1275,1278,1279,1282,1283,1286,1287,1290],{},"With ",[1124,1268,1126],{},", we can prefetch the data asynchronously ",[1271,1272,1273],"strong",{},"in any Vue components",". It means, other than page components found in ",[1124,1276,1277],{},"/pages"," directory, every other ",[1124,1280,1281],{},".vue"," components found in ",[1124,1284,1285],{},"/layouts"," and ",[1124,1288,1289],{},"/components"," directories can also benefit from the fetch hook.",[1120,1292,1293],{},"Let's see what this could mean for layout and building-block components.",[1243,1295,1297],{"id":1296},"layout-components","Layout Components",[1120,1299,1300,1301,1303],{},"Using new ",[1124,1302,1126],{},", now we can make API calls directly from the layout components. This was impossible prior to the release of v2.12.",[1120,1305,1306],{},[1271,1307,1308],{},"Possible use cases",[1310,1311,1312,1316,1319],"ul",{},[1313,1314,1315],"li",{},"Fetch config data from the back-end in Nuxt layouts to generate footer and navbar dynamically",[1313,1317,1318],{},"Fetch user related data (i.e. user profile, shopping-cart item count) in the navbar",[1313,1320,1321,1322],{},"Fetch site relevant data on ",[1124,1323,1324],{},"layouts/error.vue",[1243,1326,1328],{"id":1327},"building-block-childnested-components","Building-block (Child/Nested) Components",[1120,1330,1266,1331,1333],{},[1124,1332,1126],{}," hook available in child components as well, we can off-load some of the data-fetching tasks from page-level components, and delegate them over to nested components. This was also impossible prior to the release of v2.12.",[1120,1335,1336],{},"This reduces the responsibility of route-level components to a great extent.",[1120,1338,1339,1342],{},[1271,1340,1341],{},"Possible use case -"," We can still pass props to child components, but if the child components need to have their own data-fetching logic, now they can!",[1132,1344,1346],{"id":1345},"call-order-of-multiple-fetch-hooks","Call order of multiple fetch hooks",[1120,1348,1349],{},"Since each component can have its own data-fetching logic, you may ask what would be the order in which each of them are called?",[1120,1351,1352],{},"Fetch hook is called on server-side once (on the first request to the Nuxt app) and then on client-side when navigating to further routes. But since we can define one fetch hook for each component, fetch hooks are called in sequence of their hierarchy.",[1243,1354,1356],{"id":1355},"disabling-fetch-on-server-side","Disabling fetch on server-side",[1120,1358,1359],{},"In addition, we can even disable fetch on the server-side if required.",[1170,1361,1363],{"className":1172,"code":1362,"language":1174,"meta":1175,"style":1175},"export default {\n  fetchOnServer: false\n}\n",[1124,1364,1365,1373,1385],{"__ignoreMap":1175},[1179,1366,1367,1369,1371],{"class":1181,"line":1182},[1179,1368,1186],{"class":1185},[1179,1370,1189],{"class":1185},[1179,1372,1193],{"class":1192},[1179,1374,1375,1378,1381],{"class":1181,"line":1196},[1179,1376,1377],{"class":1199},"  fetchOnServer",[1179,1379,1380],{"class":1192},":",[1179,1382,1384],{"class":1383},"sagxc"," false\n",[1179,1386,1387],{"class":1181,"line":1208},[1179,1388,1238],{"class":1192},[1120,1390,1391,1392,1395,1396,1399,1400,1403],{},"And this way, the fetch hook will only be called on client-side. When ",[1124,1393,1394],{},"fetchOnServer"," is set to false, ",[1124,1397,1398],{},"$fetchState.pending"," becomes ",[1124,1401,1402],{},"true"," when the component is rendered on server-side.",[1132,1405,74],{"id":1406},"error-handling",[1120,1408,1409,1410,1412],{},"New ",[1124,1411,1126],{}," handles error at component level. Let’s see how.",[1120,1414,1415,1416,1419],{},"Because we’re fetching data asynchronously, the new fetch() provides a ",[1124,1417,1418],{},"$fetchState"," object to check whether the request has finished and progressed successfully.",[1120,1421,1422,1423,1425],{},"Below is what the ",[1124,1424,1418],{}," object looks like.",[1170,1427,1432],{"className":1428,"code":1430,"language":1431},[1429],"language-text","$fetchState = {\n  pending: true | false,\n  error: null | {},\n  timestamp: Integer\n};\n","text",[1124,1433,1430],{"__ignoreMap":1175},[1120,1435,1436],{},"We have three keys,",[1438,1439,1440,1446,1452],"ol",{},[1313,1441,1442,1445],{},[1271,1443,1444],{},"Pending -"," lets you display a placeholder when fetch is being called on client-side",[1313,1447,1448,1451],{},[1271,1449,1450],{},"Error -"," lets you show an error message",[1313,1453,1454,1457,1458],{},[1271,1455,1456],{},"Timestamp -"," shows timestamp of the last fetch which is useful for caching with ",[1124,1459,1460],{},"keep-alive",[1120,1462,1463],{},"These keys are then used directly in the template area of the component to show relevant placeholders during the process of fetching data from the API.",[1170,1465,1469],{"className":1466,"code":1467,"language":1468,"meta":1175,"style":1175},"language-html shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp v-if=\"$fetchState.pending\">Fetching posts...\u003C/p>\n    \u003Cp v-else-if=\"$fetchState.error\">Error while fetching posts\u003C/p>\n    \u003Cul v-else>\n      …\n    \u003C/ul>\n  \u003C/div>\n\u003C/template>\n","html",[1124,1470,1471,1482,1492,1527,1556,1567,1573,1583,1593],{"__ignoreMap":1175},[1179,1472,1473,1476,1479],{"class":1181,"line":1182},[1179,1474,1475],{"class":1192},"\u003C",[1179,1477,1478],{"class":1199},"template",[1179,1480,1481],{"class":1192},">\n",[1179,1483,1484,1487,1490],{"class":1181,"line":1196},[1179,1485,1486],{"class":1192},"  \u003C",[1179,1488,1489],{"class":1199},"div",[1179,1491,1481],{"class":1192},[1179,1493,1494,1497,1499,1503,1506,1509,1512,1514,1517,1520,1523,1525],{"class":1181,"line":1208},[1179,1495,1496],{"class":1192},"    \u003C",[1179,1498,1120],{"class":1199},[1179,1500,1502],{"class":1501},"sRBFq"," v-if",[1179,1504,1505],{"class":1192},"=",[1179,1507,1508],{"class":1192},"\"",[1179,1510,1398],{"class":1511},"s5UST",[1179,1513,1508],{"class":1192},[1179,1515,1516],{"class":1192},">",[1179,1518,1519],{"class":1211},"Fetching posts...",[1179,1521,1522],{"class":1192},"\u003C/",[1179,1524,1120],{"class":1199},[1179,1526,1481],{"class":1192},[1179,1528,1529,1531,1533,1536,1538,1540,1543,1545,1547,1550,1552,1554],{"class":1181,"line":1229},[1179,1530,1496],{"class":1192},[1179,1532,1120],{"class":1199},[1179,1534,1535],{"class":1501}," v-else-if",[1179,1537,1505],{"class":1192},[1179,1539,1508],{"class":1192},[1179,1541,1542],{"class":1511},"$fetchState.error",[1179,1544,1508],{"class":1192},[1179,1546,1516],{"class":1192},[1179,1548,1549],{"class":1211},"Error while fetching posts",[1179,1551,1522],{"class":1192},[1179,1553,1120],{"class":1199},[1179,1555,1481],{"class":1192},[1179,1557,1558,1560,1562,1565],{"class":1181,"line":1235},[1179,1559,1496],{"class":1192},[1179,1561,1310],{"class":1199},[1179,1563,1564],{"class":1501}," v-else",[1179,1566,1481],{"class":1192},[1179,1568,1570],{"class":1181,"line":1569},6,[1179,1571,1572],{"class":1211},"      …\n",[1179,1574,1576,1579,1581],{"class":1181,"line":1575},7,[1179,1577,1578],{"class":1192},"    \u003C/",[1179,1580,1310],{"class":1199},[1179,1582,1481],{"class":1192},[1179,1584,1586,1589,1591],{"class":1181,"line":1585},8,[1179,1587,1588],{"class":1192},"  \u003C/",[1179,1590,1489],{"class":1199},[1179,1592,1481],{"class":1192},[1179,1594,1596,1598,1600],{"class":1181,"line":1595},9,[1179,1597,1522],{"class":1192},[1179,1599,1478],{"class":1199},[1179,1601,1481],{"class":1192},[1120,1603,1604,1605,1608,1609,1612,1613,1616],{},"When error occurs at ",[1271,1606,1607],{},"component-level",", we can set HTTP status code on server-side by checking ",[1124,1610,1611],{},"process.server"," in fetch hook and follow it up with ",[1124,1614,1615],{},"throw new Error()"," statement.",[1170,1618,1620],{"className":1172,"code":1619,"language":1174,"meta":1175,"style":1175},"async fetch() {\n  const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${this.$route.params.id}`)\n                     .then((res) => res.json())\n\n  if (post.id === this.$route.params.id) {\n      this.post = post\n    } else {\n      // set status code on server and\n      if (process.server) {\n        this.$nuxt.context.res.statusCode = 404\n      }\n      // use throw new Error()\n      throw new Error('Post not found')\n    }\n}\n",[1124,1621,1622,1635,1684,1717,1723,1759,1771,1781,1787,1805,1834,1840,1846,1870,1876],{"__ignoreMap":1175},[1179,1623,1624,1627,1629,1632],{"class":1181,"line":1182},[1179,1625,1626],{"class":1211},"async ",[1179,1628,1126],{"class":1217},[1179,1630,1631],{"class":1211},"() ",[1179,1633,1634],{"class":1192},"{\n",[1179,1636,1637,1640,1643,1646,1649,1652,1654,1657,1660,1663,1666,1669,1671,1674,1676,1679,1682],{"class":1181,"line":1196},[1179,1638,1639],{"class":1501},"  const",[1179,1641,1642],{"class":1211}," post",[1179,1644,1645],{"class":1192}," =",[1179,1647,1648],{"class":1185}," await",[1179,1650,1651],{"class":1217}," fetch",[1179,1653,1221],{"class":1199},[1179,1655,1656],{"class":1192},"`",[1179,1658,1659],{"class":1511},"https://jsonplaceholder.typicode.com/posts/",[1179,1661,1662],{"class":1192},"${",[1179,1664,1665],{"class":1192},"this.",[1179,1667,1668],{"class":1211},"$route",[1179,1670,1168],{"class":1192},[1179,1672,1673],{"class":1211},"params",[1179,1675,1168],{"class":1192},[1179,1677,1678],{"class":1211},"id",[1179,1680,1681],{"class":1192},"}`",[1179,1683,1226],{"class":1199},[1179,1685,1686,1689,1692,1694,1696,1700,1703,1706,1709,1711,1714],{"class":1181,"line":1208},[1179,1687,1688],{"class":1192},"                     .",[1179,1690,1691],{"class":1217},"then",[1179,1693,1221],{"class":1199},[1179,1695,1221],{"class":1192},[1179,1697,1699],{"class":1698},"ssYd4","res",[1179,1701,1702],{"class":1192},")",[1179,1704,1705],{"class":1501}," =>",[1179,1707,1708],{"class":1211}," res",[1179,1710,1168],{"class":1192},[1179,1712,1713],{"class":1217},"json",[1179,1715,1716],{"class":1199},"())\n",[1179,1718,1719],{"class":1181,"line":1229},[1179,1720,1722],{"emptyLinePlaceholder":1721},true,"\n",[1179,1724,1725,1728,1731,1734,1736,1738,1741,1744,1746,1748,1750,1752,1754,1757],{"class":1181,"line":1235},[1179,1726,1727],{"class":1185},"  if",[1179,1729,1730],{"class":1199}," (",[1179,1732,1733],{"class":1211},"post",[1179,1735,1168],{"class":1192},[1179,1737,1678],{"class":1211},[1179,1739,1740],{"class":1192}," ===",[1179,1742,1743],{"class":1192}," this.",[1179,1745,1668],{"class":1211},[1179,1747,1168],{"class":1192},[1179,1749,1673],{"class":1211},[1179,1751,1168],{"class":1192},[1179,1753,1678],{"class":1211},[1179,1755,1756],{"class":1199},") ",[1179,1758,1634],{"class":1192},[1179,1760,1761,1764,1766,1768],{"class":1181,"line":1569},[1179,1762,1763],{"class":1192},"      this.",[1179,1765,1733],{"class":1211},[1179,1767,1645],{"class":1192},[1179,1769,1770],{"class":1211}," post\n",[1179,1772,1773,1776,1779],{"class":1181,"line":1575},[1179,1774,1775],{"class":1192},"    }",[1179,1777,1778],{"class":1185}," else",[1179,1780,1193],{"class":1192},[1179,1782,1783],{"class":1181,"line":1585},[1179,1784,1786],{"class":1785},"svXlt","      // set status code on server and\n",[1179,1788,1789,1792,1794,1797,1799,1801,1803],{"class":1181,"line":1595},[1179,1790,1791],{"class":1185},"      if",[1179,1793,1730],{"class":1199},[1179,1795,1796],{"class":1211},"process",[1179,1798,1168],{"class":1192},[1179,1800,219],{"class":1211},[1179,1802,1756],{"class":1199},[1179,1804,1634],{"class":1192},[1179,1806,1808,1811,1814,1816,1819,1821,1823,1825,1828,1830],{"class":1181,"line":1807},10,[1179,1809,1810],{"class":1192},"        this.",[1179,1812,1813],{"class":1211},"$nuxt",[1179,1815,1168],{"class":1192},[1179,1817,1818],{"class":1211},"context",[1179,1820,1168],{"class":1192},[1179,1822,1699],{"class":1211},[1179,1824,1168],{"class":1192},[1179,1826,1827],{"class":1211},"statusCode",[1179,1829,1645],{"class":1192},[1179,1831,1833],{"class":1832},"sV9sa"," 404\n",[1179,1835,1837],{"class":1181,"line":1836},11,[1179,1838,1839],{"class":1192},"      }\n",[1179,1841,1843],{"class":1181,"line":1842},12,[1179,1844,1845],{"class":1785},"      // use throw new Error()\n",[1179,1847,1849,1852,1855,1858,1860,1863,1866,1868],{"class":1181,"line":1848},13,[1179,1850,1851],{"class":1185},"      throw",[1179,1853,1854],{"class":1192}," new",[1179,1856,1857],{"class":1217}," Error",[1179,1859,1221],{"class":1199},[1179,1861,1862],{"class":1192},"'",[1179,1864,1865],{"class":1511},"Post not found",[1179,1867,1862],{"class":1192},[1179,1869,1226],{"class":1199},[1179,1871,1873],{"class":1181,"line":1872},14,[1179,1874,1875],{"class":1192},"    }\n",[1179,1877,1879],{"class":1181,"line":1878},15,[1179,1880,1238],{"class":1192},[1120,1882,1883,1884,1168],{},"Setting the HTTP status code this way ",[1271,1885,1886],{},"is useful for correct SEO",[1132,1888,1890],{"id":1889},"fetch-as-a-method","Fetch as a method",[1120,1892,1893],{},"New fetch hook also acts as a method that can be invoked upon user interaction or invoked programmatically from the component methods.",[1170,1895,1897],{"className":1466,"code":1896,"language":1468,"meta":1175,"style":1175},"\u003C!-- from template in template  -->\n\u003Cbutton @click=\"$fetch\">Refresh Data\u003C/button>\n",[1124,1898,1899,1904],{"__ignoreMap":1175},[1179,1900,1901],{"class":1181,"line":1182},[1179,1902,1903],{"class":1785},"\u003C!-- from template in template  -->\n",[1179,1905,1906,1908,1911,1914,1916,1918,1920,1922,1924,1927,1929,1931],{"class":1181,"line":1196},[1179,1907,1475],{"class":1192},[1179,1909,1910],{"class":1199},"button",[1179,1912,1913],{"class":1501}," @click",[1179,1915,1505],{"class":1192},[1179,1917,1508],{"class":1192},[1179,1919,547],{"class":1511},[1179,1921,1508],{"class":1192},[1179,1923,1516],{"class":1192},[1179,1925,1926],{"class":1211},"Refresh Data",[1179,1928,1522],{"class":1192},[1179,1930,1910],{"class":1199},[1179,1932,1481],{"class":1192},[1170,1934,1936],{"className":1172,"code":1935,"language":1174,"meta":1175,"style":1175},"// from component methods in script section\nexport default {\n  methods: {\n    refresh() {\n      this.$fetch()\n    }\n  }\n}\n",[1124,1937,1938,1943,1951,1960,1969,1978,1982,1986],{"__ignoreMap":1175},[1179,1939,1940],{"class":1181,"line":1182},[1179,1941,1942],{"class":1785},"// from component methods in script section\n",[1179,1944,1945,1947,1949],{"class":1181,"line":1196},[1179,1946,1186],{"class":1185},[1179,1948,1189],{"class":1185},[1179,1950,1193],{"class":1192},[1179,1952,1953,1956,1958],{"class":1181,"line":1208},[1179,1954,1955],{"class":1199},"  methods",[1179,1957,1380],{"class":1192},[1179,1959,1193],{"class":1192},[1179,1961,1962,1965,1967],{"class":1181,"line":1229},[1179,1963,1964],{"class":1199},"    refresh",[1179,1966,1203],{"class":1192},[1179,1968,1193],{"class":1192},[1179,1970,1971,1973,1975],{"class":1181,"line":1235},[1179,1972,1763],{"class":1192},[1179,1974,547],{"class":1217},[1179,1976,1977],{"class":1199},"()\n",[1179,1979,1980],{"class":1181,"line":1569},[1179,1981,1875],{"class":1192},[1179,1983,1984],{"class":1181,"line":1575},[1179,1985,1232],{"class":1192},[1179,1987,1988],{"class":1181,"line":1585},[1179,1989,1238],{"class":1192},[1132,1991,1993],{"id":1992},"making-nuxt-pages-more-performant","Making Nuxt pages more performant",[1120,1995,1996,1997,2000,2001,2004],{},"We can use ",[1124,1998,1999],{},":keep-alive-props"," prop and ",[1124,2002,2003],{},"activated"," hook to make Nuxt page components more performant using a new fetch hook.",[1120,2006,2007,2008,2011,2012,2015],{},"Nuxt allows ",[1271,2009,2010],{},"caching a certain number of pages"," in the memory along with their fetched data. And also allows ",[1271,2013,2014],{},"adding a number of seconds"," before we can re-fetch the data.",[1120,2017,2018,2019,2021,2022,1286,2025,2028],{},"For any of the above methods to work, we have to use the ",[1124,2020,1460],{}," prop in generic ",[1124,2023,2024],{},"\u003Cnuxt />",[1124,2026,2027],{},"\u003Cnuxt-child","> components.",[1170,2030,2033],{"className":1466,"code":2031,"filename":2032,"language":1468,"meta":1175,"style":1175},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cnuxt keep-alive />\n  \u003C/div>\n\u003C/template>\n","layouts/default.vue",[1124,2034,2035,2043,2051,2064,2072],{"__ignoreMap":1175},[1179,2036,2037,2039,2041],{"class":1181,"line":1182},[1179,2038,1475],{"class":1192},[1179,2040,1478],{"class":1199},[1179,2042,1481],{"class":1192},[1179,2044,2045,2047,2049],{"class":1181,"line":1196},[1179,2046,1486],{"class":1192},[1179,2048,1489],{"class":1199},[1179,2050,1481],{"class":1192},[1179,2052,2053,2055,2058,2061],{"class":1181,"line":1208},[1179,2054,1496],{"class":1192},[1179,2056,2057],{"class":1199},"nuxt",[1179,2059,2060],{"class":1501}," keep-alive",[1179,2062,2063],{"class":1192}," />\n",[1179,2065,2066,2068,2070],{"class":1181,"line":1229},[1179,2067,1588],{"class":1192},[1179,2069,1489],{"class":1199},[1179,2071,1481],{"class":1192},[1179,2073,2074,2076,2078],{"class":1181,"line":1235},[1179,2075,1522],{"class":1192},[1179,2077,1478],{"class":1199},[1179,2079,1481],{"class":1192},[1120,2081,2082,2083,2085,2086,2088],{},"In addition, we can pass ",[1124,2084,1999],{}," to ",[1124,2087,2024],{}," component to cache a number of pages along with their fetched data.",[1120,2090,2091,2093],{},[1124,2092,1999],{}," prop allow us to indicate the maximum number of pages that should be kept in the memory while we navigate elsewhere within the site.",[1170,2095,2097],{"className":1466,"code":2096,"filename":2032,"language":1468,"meta":1175,"style":1175},"\u003Cnuxt keep-alive :keep-alive-props=\"{ max: 10 }\" />\n",[1124,2098,2099],{"__ignoreMap":1175},[1179,2100,2101,2103,2105,2107,2110,2112,2114,2117,2119],{"class":1181,"line":1182},[1179,2102,1475],{"class":1192},[1179,2104,2057],{"class":1199},[1179,2106,2060],{"class":1501},[1179,2108,2109],{"class":1501}," :keep-alive-props",[1179,2111,1505],{"class":1192},[1179,2113,1508],{"class":1192},[1179,2115,2116],{"class":1511},"{ max: 10 }",[1179,2118,1508],{"class":1192},[1179,2120,2063],{"class":1192},[1120,2122,2123,2124,2127,2128,2130],{},"Above is one way to boost page performance which is more high-level and generic, while the next one drills down to optimize the fetch request calls by using the ",[1124,2125,2126],{},"timestamp"," property of ",[1124,2129,1418],{}," and comparing it against the number of seconds delay before it re-fetches the data.",[1120,2132,2133,2134,2136,2137,2139],{},"Vue’s ",[1124,2135,2003],{}," hook is used here with Nuxt's ",[1124,2138,1460],{}," prop to re-fetch the data.",[1170,2141,2143],{"className":1172,"code":2142,"language":1174,"meta":1175,"style":1175},"export default {\n  activated() {\n    // Call fetch again if last fetch more than a minute ago\n    if (this.$fetchState.timestamp \u003C= Date.now() - 60000) {\n      this.$fetch()\n    }\n  }\n}\n",[1124,2144,2145,2153,2162,2167,2205,2213,2217,2221],{"__ignoreMap":1175},[1179,2146,2147,2149,2151],{"class":1181,"line":1182},[1179,2148,1186],{"class":1185},[1179,2150,1189],{"class":1185},[1179,2152,1193],{"class":1192},[1179,2154,2155,2158,2160],{"class":1181,"line":1196},[1179,2156,2157],{"class":1199},"  activated",[1179,2159,1203],{"class":1192},[1179,2161,1193],{"class":1192},[1179,2163,2164],{"class":1181,"line":1208},[1179,2165,2166],{"class":1785},"    // Call fetch again if last fetch more than a minute ago\n",[1179,2168,2169,2172,2174,2176,2178,2180,2182,2185,2188,2190,2193,2195,2198,2201,2203],{"class":1181,"line":1229},[1179,2170,2171],{"class":1185},"    if",[1179,2173,1730],{"class":1199},[1179,2175,1665],{"class":1192},[1179,2177,1418],{"class":1211},[1179,2179,1168],{"class":1192},[1179,2181,2126],{"class":1211},[1179,2183,2184],{"class":1192}," \u003C=",[1179,2186,2187],{"class":1211}," Date",[1179,2189,1168],{"class":1192},[1179,2191,2192],{"class":1217},"now",[1179,2194,1631],{"class":1199},[1179,2196,2197],{"class":1192},"-",[1179,2199,2200],{"class":1832}," 60000",[1179,2202,1756],{"class":1199},[1179,2204,1634],{"class":1192},[1179,2206,2207,2209,2211],{"class":1181,"line":1235},[1179,2208,1763],{"class":1192},[1179,2210,547],{"class":1217},[1179,2212,1977],{"class":1199},[1179,2214,2215],{"class":1181,"line":1569},[1179,2216,1875],{"class":1192},[1179,2218,2219],{"class":1181,"line":1575},[1179,2220,1232],{"class":1192},[1179,2222,2223],{"class":1181,"line":1585},[1179,2224,1238],{"class":1192},[1132,2226,2228],{"id":2227},"asyncdata-vs-fetch","asyncData vs Fetch",[1120,2230,2231,2232,2234,2235,2238],{},"As far as page components are concerned, new ",[1124,2233,1126],{}," seems way too similar to ",[1124,2236,2237],{},"asyncData()"," because they both deal with the local data. But there are some key differences worth taking note of as below.",[1120,2240,2241,2242,2245,2246,2248,2249,1168],{},"As of Nuxt 2.12, ",[1124,2243,2244],{},"asyncData"," method is still an active feature. Let’s examine some of the key differences between ",[1124,2247,2244],{}," and new ",[1124,2250,1126],{},[1243,2252,2244],{"id":2253},"asyncdata",[1438,2255,2256,2261,2266],{},[1313,2257,2258,2260],{},[1124,2259,2244],{}," is limited to only page-level components",[1313,2262,2263,2265],{},[1124,2264,1148],{}," context is unavailable",[1313,2267,2268,2269,2272],{},"Adds payload by ",[1271,2270,2271],{},"returning"," the data",[1170,2274,2276],{"className":1172,"code":2275,"language":1174,"meta":1175,"style":1175},"export default {\n  async asyncData(context) {\n    const data = await context.$axios.$get(\n      `https://jsonplaceholder.typicode.com/todos`\n    )\n    // `todos` does not have to be declared in data()\n    return { todos: data.Item }\n    // `todos` is merged with local data\n  }\n}\n",[1124,2277,2278,2286,2302,2330,2341,2346,2351,2374,2379,2383],{"__ignoreMap":1175},[1179,2279,2280,2282,2284],{"class":1181,"line":1182},[1179,2281,1186],{"class":1185},[1179,2283,1189],{"class":1185},[1179,2285,1193],{"class":1192},[1179,2287,2288,2291,2294,2296,2298,2300],{"class":1181,"line":1196},[1179,2289,2290],{"class":1501},"  async",[1179,2292,2293],{"class":1199}," asyncData",[1179,2295,1221],{"class":1192},[1179,2297,1818],{"class":1698},[1179,2299,1702],{"class":1192},[1179,2301,1193],{"class":1192},[1179,2303,2304,2307,2310,2312,2314,2317,2319,2322,2324,2327],{"class":1181,"line":1208},[1179,2305,2306],{"class":1501},"    const",[1179,2308,2309],{"class":1211}," data",[1179,2311,1645],{"class":1192},[1179,2313,1648],{"class":1185},[1179,2315,2316],{"class":1211}," context",[1179,2318,1168],{"class":1192},[1179,2320,2321],{"class":1211},"$axios",[1179,2323,1168],{"class":1192},[1179,2325,2326],{"class":1217},"$get",[1179,2328,2329],{"class":1199},"(\n",[1179,2331,2332,2335,2338],{"class":1181,"line":1229},[1179,2333,2334],{"class":1192},"      `",[1179,2336,2337],{"class":1511},"https://jsonplaceholder.typicode.com/todos",[1179,2339,2340],{"class":1192},"`\n",[1179,2342,2343],{"class":1181,"line":1235},[1179,2344,2345],{"class":1199},"    )\n",[1179,2347,2348],{"class":1181,"line":1569},[1179,2349,2350],{"class":1785},"    // `todos` does not have to be declared in data()\n",[1179,2352,2353,2356,2359,2362,2364,2366,2368,2371],{"class":1181,"line":1575},[1179,2354,2355],{"class":1185},"    return",[1179,2357,2358],{"class":1192}," {",[1179,2360,2361],{"class":1199}," todos",[1179,2363,1380],{"class":1192},[1179,2365,2309],{"class":1211},[1179,2367,1168],{"class":1192},[1179,2369,2370],{"class":1211},"Item",[1179,2372,2373],{"class":1192}," }\n",[1179,2375,2376],{"class":1181,"line":1585},[1179,2377,2378],{"class":1785},"    // `todos` is merged with local data\n",[1179,2380,2381],{"class":1181,"line":1595},[1179,2382,1232],{"class":1192},[1179,2384,2385],{"class":1181,"line":1807},[1179,2386,1238],{"class":1192},[1243,2388,2390],{"id":2389},"new-fetch","New Fetch",[1438,2392,2393,2398,2403],{},[1313,2394,2395,2397],{},[1124,2396,1126],{}," is available in all Vue components",[1313,2399,2400,2402],{},[1124,2401,1148],{}," context is available",[1313,2404,2405,2406,2409],{},"Simply ",[1271,2407,2408],{},"mutates"," the local data",[1170,2411,2413],{"className":1172,"code":2412,"language":1174,"meta":1175,"style":1175},"export default {\n  data() {\n    return {\n      todos: []\n    }\n  },\n  async fetch() {\n    const { data } = await axios.get(\n      `https://jsonplaceholder.typicode.com/todos`\n    )\n    // `todos` has to be declared in data()\n    this.todos = data\n  }\n}\n",[1124,2414,2415,2423,2432,2438,2448,2452,2457,2467,2492,2500,2504,2509,2522,2526],{"__ignoreMap":1175},[1179,2416,2417,2419,2421],{"class":1181,"line":1182},[1179,2418,1186],{"class":1185},[1179,2420,1189],{"class":1185},[1179,2422,1193],{"class":1192},[1179,2424,2425,2428,2430],{"class":1181,"line":1196},[1179,2426,2427],{"class":1199},"  data",[1179,2429,1203],{"class":1192},[1179,2431,1193],{"class":1192},[1179,2433,2434,2436],{"class":1181,"line":1208},[1179,2435,2355],{"class":1185},[1179,2437,1193],{"class":1192},[1179,2439,2440,2443,2445],{"class":1181,"line":1229},[1179,2441,2442],{"class":1199},"      todos",[1179,2444,1380],{"class":1192},[1179,2446,2447],{"class":1199}," []\n",[1179,2449,2450],{"class":1181,"line":1235},[1179,2451,1875],{"class":1192},[1179,2453,2454],{"class":1181,"line":1569},[1179,2455,2456],{"class":1192},"  },\n",[1179,2458,2459,2461,2463,2465],{"class":1181,"line":1575},[1179,2460,2290],{"class":1501},[1179,2462,1651],{"class":1199},[1179,2464,1203],{"class":1192},[1179,2466,1193],{"class":1192},[1179,2468,2469,2471,2473,2475,2478,2480,2482,2485,2487,2490],{"class":1181,"line":1585},[1179,2470,2306],{"class":1501},[1179,2472,2358],{"class":1192},[1179,2474,2309],{"class":1211},[1179,2476,2477],{"class":1192}," }",[1179,2479,1645],{"class":1192},[1179,2481,1648],{"class":1185},[1179,2483,2484],{"class":1211}," axios",[1179,2486,1168],{"class":1192},[1179,2488,2489],{"class":1217},"get",[1179,2491,2329],{"class":1199},[1179,2493,2494,2496,2498],{"class":1181,"line":1595},[1179,2495,2334],{"class":1192},[1179,2497,2337],{"class":1511},[1179,2499,2340],{"class":1192},[1179,2501,2502],{"class":1181,"line":1807},[1179,2503,2345],{"class":1199},[1179,2505,2506],{"class":1181,"line":1836},[1179,2507,2508],{"class":1785},"    // `todos` has to be declared in data()\n",[1179,2510,2511,2514,2517,2519],{"class":1181,"line":1842},[1179,2512,2513],{"class":1192},"    this.",[1179,2515,2516],{"class":1211},"todos",[1179,2518,1645],{"class":1192},[1179,2520,2521],{"class":1211}," data\n",[1179,2523,2524],{"class":1181,"line":1848},[1179,2525,1232],{"class":1192},[1179,2527,2528],{"class":1181,"line":1872},[1179,2529,1238],{"class":1192},[1132,2531,2533],{"id":2532},"fetch-before-nuxt-212","Fetch before Nuxt 2.12",[1120,2535,2536,2537,2539],{},"If you have been working with Nuxt for a while, then you’ll know that the previous version of ",[1124,2538,1126],{}," was significantly different.",[2541,2542,2543],"blockquote",{},[1120,2544,2545],{},[1271,2546,2547],{},"Is this a breaking change?",[2541,2549,2550],{},[1120,2551,2552,2553,2555],{},"No, it isn't. Actually, the old fetch can still be used by passing the ",[1124,2554,1818],{}," as the first argument to avoid any breaking changes in your existing Nuxt applications.",[1120,2557,2558,2559,2561,2562,1286,2565,2568],{},"Here’s the list of notable changes in ",[1124,2560,1126],{}," hook compared with ",[1271,2563,2564],{},"before",[1271,2566,2567],{},"after"," v2.12.",[1243,2570,2572,2573,2575],{"id":2571},"_1-call-order-of-fetch-hook","1. Call order of ",[1124,2574,1126],{}," hook",[1120,2577,2578,2581,2582,2584,2585,2587],{},[1271,2579,2580],{},"Before -"," ",[1124,2583,1126],{}," hook was called before initiating the component, hence ",[1124,2586,1148],{}," wasn’t available inside the fetch hook.",[1120,2589,2590,2581,2593,2595],{},[1271,2591,2592],{},"After -",[1124,2594,1126],{}," is called after the component instance is created on the server-side when the route is accessed.",[1243,2597,2599,2600,2602,2603],{"id":2598},"_2-this-vs-context","2. ",[1124,2601,1148],{}," vs ",[1124,2604,1818],{},[1120,2606,2607,2609,2610,2612,2613,2615],{},[1271,2608,2580],{}," We had access to the Nuxt ",[1124,2611,1818],{}," on page-level components, given that the ",[1124,2614,1818],{}," is passed as a first parameter.",[1170,2617,2619],{"className":1172,"code":2618,"language":1174,"meta":1175,"style":1175},"export default {\n  fetch(context) {\n    // …\n  }\n}\n",[1124,2620,2621,2629,2641,2646,2650],{"__ignoreMap":1175},[1179,2622,2623,2625,2627],{"class":1181,"line":1182},[1179,2624,1186],{"class":1185},[1179,2626,1189],{"class":1185},[1179,2628,1193],{"class":1192},[1179,2630,2631,2633,2635,2637,2639],{"class":1181,"line":1196},[1179,2632,1200],{"class":1199},[1179,2634,1221],{"class":1192},[1179,2636,1818],{"class":1698},[1179,2638,1702],{"class":1192},[1179,2640,1193],{"class":1192},[1179,2642,2643],{"class":1181,"line":1208},[1179,2644,2645],{"class":1785},"    // …\n",[1179,2647,2648],{"class":1181,"line":1229},[1179,2649,1232],{"class":1192},[1179,2651,2652],{"class":1181,"line":1235},[1179,2653,1238],{"class":1192},[1120,2655,2656,2658,2659,2661],{},[1271,2657,2592],{}," We can access ",[1124,2660,1148],{}," context just like Vue client-side hooks without passing any parameters.",[1170,2663,2664],{"className":1172,"code":1173,"language":1174,"meta":1175,"style":1175},[1124,2665,2666,2674,2682,2696,2700],{"__ignoreMap":1175},[1179,2667,2668,2670,2672],{"class":1181,"line":1182},[1179,2669,1186],{"class":1185},[1179,2671,1189],{"class":1185},[1179,2673,1193],{"class":1192},[1179,2675,2676,2678,2680],{"class":1181,"line":1196},[1179,2677,1200],{"class":1199},[1179,2679,1203],{"class":1192},[1179,2681,1193],{"class":1192},[1179,2683,2684,2686,2688,2690,2692,2694],{"class":1181,"line":1208},[1179,2685,1212],{"class":1211},[1179,2687,1168],{"class":1192},[1179,2689,1218],{"class":1217},[1179,2691,1221],{"class":1199},[1179,2693,1148],{"class":1192},[1179,2695,1226],{"class":1199},[1179,2697,2698],{"class":1181,"line":1229},[1179,2699,1232],{"class":1192},[1179,2701,2702],{"class":1181,"line":1235},[1179,2703,1238],{"class":1192},[1243,2705,2707,2708,2575],{"id":2706},"_3-availability-of-fetch-hook","3. Availability of ",[1124,2709,1126],{},[1120,2711,2712,2714],{},[1271,2713,2580],{}," Only page (route-level) components were allowed to fetch data on the server-side.",[1120,2716,2717,2719],{},[1271,2718,2592],{}," Now, we can prefetch the data asynchronously in any Vue components.",[1243,2721,2723,2724,2575],{"id":2722},"_4-call-order-of-fetch-hook","4. Call order of ",[1124,2725,1126],{},[1120,2727,2728,2581,2730,2732],{},[1271,2729,2580],{},[1124,2731,1126],{}," could be called server-side once (on the first request to the Nuxt app) and client-side when navigating to further routes.",[1120,2734,2735,2737,2738,2740],{},[1271,2736,2592],{}," New ",[1124,2739,1126],{}," is the same as an old fetch, but…",[1120,2742,2743,2744,2746,2747,2749],{},"…since we can have one ",[1124,2745,1126],{}," for each component, ",[1124,2748,1126],{}," hooks are called in sequence of their hierarchy.",[1243,2751,2753],{"id":2752},"_5-error-handling","5. Error Handling",[1120,2755,2756,2758,2759,2762],{},[1271,2757,2580],{}," We used the ",[1124,2760,2761],{},"context.error"," function that showed a custom error page when an error occurred during API calls.",[1120,2764,2765,2737,2767,2769,2770,2772],{},[1271,2766,2592],{},[1124,2768,1126],{}," uses the ",[1124,2771,1418],{}," object to handle errors in the template area during API calls.",[1120,2774,2775],{},"Error handling is performed at component level.",[2541,2777,2778],{},[1120,2779,2780],{},[1271,2781,2782],{},"Does this mean we cannot show users a custom error page like we did prior to Nuxt 2.12?",[1120,2784,2785,2786,2788,2789,2791,2792,2795],{},"Yes we can, but only with ",[1124,2787,2237],{}," when it's about page-level component data. When using ",[1124,2790,1126],{},", we can utilize ",[1124,2793,2794],{},"this.$nuxt.error({ statusCode: 404, message: 'Data not found' })"," to show a custom error page.",[1132,2797,2799],{"id":2798},"conclusion","Conclusion",[1120,2801,2802],{},"New fetch hook brings a lot of improvements and provides more flexibility in fetching data and organizing route-level & building-block components in a whole new way!",[1120,2804,2805],{},"It will certainly make you think a little differently when you plan and design your new Nuxt project that requires multiple API calls within the same route.",[1120,2807,2808,2809,2811],{},"I hope this article has helped you get acquainted with the new ",[1124,2810,1126],{}," feature. I'd love to see what you build with it.",[2813,2814,2815],"style",{},"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 .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 .spdxX, html code.shiki .spdxX{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .szd4z, html code.shiki .szd4z{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sagxc, html code.shiki .sagxc{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}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 .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 .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 pre.shiki code .sV9sa, html code.shiki .sV9sa{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}",{"title":1175,"searchDepth":1196,"depth":1196,"links":2817},[2818,2821,2825,2828,2829,2830,2831,2835,2846],{"id":1134,"depth":1196,"text":1135,"children":2819},[2820],{"id":1245,"depth":1208,"text":1246},{"id":1262,"depth":1196,"text":1263,"children":2822},[2823,2824],{"id":1296,"depth":1208,"text":1297},{"id":1327,"depth":1208,"text":1328},{"id":1345,"depth":1196,"text":1346,"children":2826},[2827],{"id":1355,"depth":1208,"text":1356},{"id":1406,"depth":1196,"text":74},{"id":1889,"depth":1196,"text":1890},{"id":1992,"depth":1196,"text":1993},{"id":2227,"depth":1196,"text":2228,"children":2832},[2833,2834],{"id":2253,"depth":1208,"text":2244},{"id":2389,"depth":1208,"text":2390},{"id":2532,"depth":1196,"text":2533,"children":2836},[2837,2839,2841,2843,2845],{"id":2571,"depth":1208,"text":2838},"1. Call order of fetch hook",{"id":2598,"depth":1208,"text":2840},"2. this vs context",{"id":2706,"depth":1208,"text":2842},"3. Availability of fetch hook",{"id":2722,"depth":1208,"text":2844},"4. Call order of fetch hook",{"id":2752,"depth":1208,"text":2753},{"id":2798,"depth":1196,"text":2799},"Release","2020-04-06","Explore different features of the fetch hook and learn a brand new way to bring data into Nuxt applications.","md","/assets/blog/understanding-how-fetch-works-in-nuxt-2.12.png",{},{"title":1096,"description":2849},"VPd2sK2rQZ",[2856,2858],{"title":1088,"path":1089,"stem":1090,"description":2857,"children":-1},"Long awaited features for JAMstack fans has been shipped in v2.13: full static export, improved smart prefetching, integrated crawler, faster re-deploy, built-in web server and new target option for config ⚡️",{"title":1104,"path":1105,"stem":1106,"description":2859,"children":-1},"How we changed the developer experience to stop switching between the terminal and browser.",1742651346019]