[{"data":1,"prerenderedAt":510},["ShallowReactive",2],{"blog-nuxt-4-vs-nuxt-3":3},{"id":4,"title":5,"articleType":6,"author":7,"authorSlug":8,"body":9,"cta":486,"date":487,"description":488,"extension":489,"faq":490,"featured":497,"image":498,"meta":499,"navigation":500,"noCtaBox":497,"path":501,"readTime":502,"seo":503,"seoTitle":504,"stem":505,"tags":506,"__hash__":509},"blog\u002Fblog\u002Fnuxt-4-vs-nuxt-3.md","Nuxt 4 vs Nuxt 3: Key Differences Compared","TechArticle","Pavel Mironov","pavel-mironov",{"type":10,"value":11,"toc":463},"minimark",[12,16,21,35,167,171,174,179,215,219,239,243,253,257,264,268,271,357,373,377,386,390,406,410,421,425,429,432,436,439,443,446,450,453,457],[13,14,15],"p",{},"Nuxt 4 came out in July 2025, and Nuxt 3 reached end of life a year later. If you still run Nuxt 3, or you're starting a project and want to know what changed, this post covers the differences, the breaking changes that catch teams out, and whether to move now.",[17,18,20],"h2",{"id":19},"nuxt-4-vs-nuxt-3-differences-the-short-answer","Nuxt 4 vs Nuxt 3 Differences: The Short Answer",[13,22,23,24,28,29,34],{},"Nuxt 4 vs Nuxt 3 differences come down to defaults. It's the same Vue, the same Nitro server and the same rendering modes. It moves your code into an ",[25,26,27],"code",{},"app\u002F"," directory, makes data fetching share state by key, splits TypeScript into separate projects and speeds up the dev tooling. If you're new to the framework itself, start with ",[30,31,33],"a",{"href":32},"\u002Fblog\u002Fwhat-is-nuxt","What is Nuxt",".",[36,37,38,53],"table",{},[39,40,41],"thead",{},[42,43,44,47,50],"tr",{},[45,46],"th",{},[45,48,49],{},"Nuxt 3",[45,51,52],{},"Nuxt 4",[54,55,56,70,98,117,135,146,156],"tbody",{},[42,57,58,62,65],{},[59,60,61],"td",{},"Source directory",[59,63,64],{},"Project root",[59,66,67,69],{},[25,68,27],{}," (old layout still detected)",[42,71,72,81,84],{},[59,73,74,77,78],{},[25,75,76],{},"useFetch"," \u002F ",[25,79,80],{},"useAsyncData",[59,82,83],{},"Each call has its own state",[59,85,86,87,90,91,94,95],{},"Same key shares ",[25,88,89],{},"data",", ",[25,92,93],{},"error"," and ",[25,96,97],{},"status",[42,99,100,107,112],{},[59,101,102,103,94,105],{},"Default ",[25,104,89],{},[25,106,93],{},[59,108,109],{},[25,110,111],{},"null",[59,113,114],{},[25,115,116],{},"undefined",[42,118,119,124,130],{},[59,120,121,123],{},[25,122,89],{}," reactivity",[59,125,126,127],{},"Deep ",[25,128,129],{},"ref",[59,131,132],{},[25,133,134],{},"shallowRef",[42,136,137,140,143],{},[59,138,139],{},"TypeScript",[59,141,142],{},"One project",[59,144,145],{},"Separate app, server, shared and node projects",[42,147,148,151,154],{},[59,149,150],{},"Server engine",[59,152,153],{},"Nitro v2",[59,155,153],{},[42,157,158,161,164],{},[59,159,160],{},"Support",[59,162,163],{},"End of life since July 31, 2026",[59,165,166],{},"Current major",[17,168,170],{"id":169},"whats-new-in-nuxt-4-key-nuxt-4-features","What's New in Nuxt 4: Key Nuxt 4 Features",[13,172,173],{},"What's new in Nuxt 4 is mostly structure and data fetching. These are the Nuxt 4 features you'll notice first.",[175,176,178],"h3",{"id":177},"the-app-directory","The app\u002F Directory",[13,180,181,182,184,185,188,189,90,192,90,195,90,198,90,201,94,204,207,208,94,211,214],{},"Your pages, components, layouts, composables and plugins now live in ",[25,183,27],{},", and ",[25,186,187],{},"~"," points there. ",[25,190,191],{},"server\u002F",[25,193,194],{},"shared\u002F",[25,196,197],{},"public\u002F",[25,199,200],{},"layers\u002F",[25,202,203],{},"modules\u002F",[25,205,206],{},"nuxt.config.ts"," stay at the root. The point is to keep your code apart from ",[25,209,210],{},"node_modules\u002F",[25,212,213],{},".git\u002F",", which the Nuxt team says makes file watching faster. Nuxt 4 still detects the Nuxt 3 layout, so moving is optional.",[175,216,218],{"id":217},"singleton-data-fetching","Singleton Data Fetching",[13,220,221,222,224,225,227,228,90,230,94,232,234,235,238],{},"Calls to ",[25,223,80],{}," or ",[25,226,76],{}," with the same key now share their ",[25,229,89],{},[25,231,93],{},[25,233,97],{},". Two components that fetch ",[25,236,237],{},"cart"," read the same state instead of keeping two copies. Data is cleaned up when the components using it unmount, and a reactive key refetches when it changes. The catch: calls that share a key must not use conflicting options.",[175,240,242],{"id":241},"separate-typescript-projects","Separate TypeScript Projects",[13,244,245,246,248,249,252],{},"Nuxt now generates separate TypeScript projects for app code, server code, ",[25,247,194],{}," and build-time code, and you keep a single ",[25,250,251],{},"tsconfig.json"," at the root. App code no longer sees server-only types, and the reverse. Project references are opt-in, so this doesn't force a migration.",[175,254,256],{"id":255},"faster-cli-and-dev-server","Faster CLI and Dev Server",[13,258,259,260,263],{},"The 4.0 release lists four changes. The dev server starts noticeably faster, Nuxt reuses the V8 compile cache, and file watching uses ",[25,261,262],{},"fs.watch"," for fewer system resources. The CLI also talks to the Vite dev server over internal sockets instead of network ports. The Nuxt team didn't publish startup numbers.",[17,265,267],{"id":266},"nuxt-4-breaking-changes","Nuxt 4 Breaking Changes",[13,269,270],{},"Nuxt 4 brought few breaking changes overall, but the data fetching ones catch teams out. The ones to check first:",[272,273,274,289,301,304,321,335,347],"ol",{},[275,276,277,94,279,281,282,284,285,288],"li",{},[25,278,89],{},[25,280,93],{}," now default to ",[25,283,116],{},", so code that checks ",[25,286,287],{},"data.value === null"," stops working.",[275,290,291,293,294,296,297,300],{},[25,292,89],{}," is a ",[25,295,134],{},". Mutating a nested field no longer triggers an update: replace the value, or pass ",[25,298,299],{},"deep: true"," for that call.",[275,302,303],{},"Two calls with the same key now read the same refs, so their options must not conflict.",[275,305,306,309,310,312,313,316,317,320],{},[25,307,308],{},"pending"," follows ",[25,311,97],{},". With ",[25,314,315],{},"immediate: false"," it stays ",[25,318,319],{},"false"," until the first request starts.",[275,322,323,94,326,328,329,224,332,34],{},[25,324,325],{},"dedupe: true",[25,327,319],{}," are gone. Use ",[25,330,331],{},"'cancel'",[25,333,334],{},"'defer'",[275,336,337,338,90,341,94,344,34],{},"Head management moves to Unhead v2, which drops ",[25,339,340],{},"hid",[25,342,343],{},"vmid",[25,345,346],{},"children",[275,348,349,350,353,354,34],{},"The top-level ",[25,351,352],{},"generate"," config is gone. Prerender options live under ",[25,355,356],{},"nitro.prerender",[13,358,359,360,363,364,366,367,34],{},"TypeScript also gets stricter: ",[25,361,362],{},"noUncheckedIndexedAccess"," is on by default, so array and record lookups can now be ",[25,365,116],{},". Most of these changes have a flag that restores the old behavior. The full list is in the ",[30,368,372],{"href":369,"rel":370},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fgetting-started\u002Fupgrade",[371],"nofollow","official upgrade guide",[17,374,376],{"id":375},"nuxt-3-end-of-life-and-nuxt-5","Nuxt 3 End of Life and Nuxt 5",[13,378,379,380,385],{},"Nuxt 3 was due to lose support at the end of January 2026. The team extended that, and Nuxt 3 reached end of life on July 31, 2026. It no longer gets bug fixes or security patches. Nuxt 5 isn't out yet: the ",[30,381,384],{"href":382,"rel":383},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fcommunity\u002Froadmap",[371],"official roadmap"," estimates Q4 2026 and lists Nitro v3 as the main change. Nuxt 4 stays supported for six months after Nuxt 5 ships.",[17,387,389],{"id":388},"should-you-move-to-nuxt-4","Should You Move to Nuxt 4?",[13,391,392,393,395,396,400,401,405],{},"Yes. Nuxt 3 gets no more security fixes, and Nuxt 4 is the version Nuxt 5 will upgrade from. The size of the job depends on how much data fetching code relies on ",[25,394,111],{}," checks and nested mutation. Our ",[30,397,399],{"href":398},"\u002Fblog\u002Fnuxt4-migration","Nuxt 4 migration guide"," covers the upgrade, and our ",[30,402,404],{"href":403},"\u002Fservices\u002Fnuxt-migration","Nuxt migration services"," team can take it on.",[17,407,409],{"id":408},"conclusion","Conclusion",[13,411,412,413,415,416,420],{},"Nuxt 4 tidies up Nuxt 3. The ",[25,414,27],{}," folder and split TypeScript are easy wins, and the data fetching changes are where upgrades break. As an ",[30,417,419],{"href":418},"\u002Fblog\u002Fepicmax-official-nuxt-partner","official Nuxt partner",", we can help you plan the move.",[17,422,424],{"id":423},"faqs","FAQs",[175,426,428],{"id":427},"is-nuxt-4-backward-compatible-with-nuxt-3","Is Nuxt 4 backward compatible with Nuxt 3?",[13,430,431],{},"Mostly. The Nuxt team calls 4.0 a stability-focused release with a few deliberate breaking changes, and most of them have a config flag that restores the Nuxt 3 behavior. Most projects upgrade with little code change, but data fetching code needs a review.",[175,433,435],{"id":434},"is-nuxt-3-still-supported","Is Nuxt 3 still supported?",[13,437,438],{},"No. Nuxt 3 reached end of life on July 31, 2026, and no longer gets bug fixes or security patches from the Nuxt team. Some vendors sell paid security support for it, but the supported path is Nuxt 4.",[175,440,442],{"id":441},"is-nuxt-4-faster-than-nuxt-3","Is Nuxt 4 faster than Nuxt 3?",[13,444,445],{},"In development, yes: the Nuxt team reports a faster dev server start, lighter file watching and a faster CLI. They make no runtime speed claim for Nuxt 4 itself, since both versions run on Nitro v2 and Vue 3.5. The shallow data refs can save reactivity work on large payloads.",[175,447,449],{"id":448},"do-i-have-to-use-the-app-directory-in-nuxt-4","Do I have to use the app\u002F directory in Nuxt 4?",[13,451,452],{},"No. Nuxt 4 auto-detects the Nuxt 3 folder layout, so an upgraded project keeps working without moving files. New projects start with app\u002F, and moving to it is a one-time change you can make later.",[175,454,456],{"id":455},"what-happens-to-nuxt-4-when-nuxt-5-ships","What happens to Nuxt 4 when Nuxt 5 ships?",[13,458,459,460,34],{},"Nuxt 4 stays supported for 6 months after Nuxt 5 is released, according to the official roadmap. Nuxt 5 is estimated for Q4 2026 and brings Nitro v3. Nuxt 4.2 and later can already test Nuxt 5 behavior with ",[25,461,462],{},"future.compatibilityVersion: 5",{"title":464,"searchDepth":465,"depth":465,"links":466},"",3,[467,469,475,476,477,478,479],{"id":19,"depth":468,"text":20},2,{"id":169,"depth":468,"text":170,"children":470},[471,472,473,474],{"id":177,"depth":465,"text":178},{"id":217,"depth":465,"text":218},{"id":241,"depth":465,"text":242},{"id":255,"depth":465,"text":256},{"id":266,"depth":468,"text":267},{"id":375,"depth":468,"text":376},{"id":388,"depth":468,"text":389},{"id":408,"depth":468,"text":409},{"id":423,"depth":468,"text":424,"children":480},[481,482,483,484,485],{"id":427,"depth":465,"text":428},{"id":434,"depth":465,"text":435},{"id":441,"depth":465,"text":442},{"id":448,"depth":465,"text":449},{"id":455,"depth":465,"text":456},null,"2026-11-14","See what's new in Nuxt 4, the Nuxt 4 features that matter, the Nuxt 4 breaking changes that catch teams out, and where Nuxt 3 stands now.","md",[491,492,493,494,495],{"question":428,"answer":431},{"question":435,"answer":438},{"question":442,"answer":445},{"question":449,"answer":452},{"question":456,"answer":496},"Nuxt 4 stays supported for 6 months after Nuxt 5 is released, according to the official roadmap. Nuxt 5 is estimated for Q4 2026 and brings Nitro v3. Nuxt 4.2 and later can already test Nuxt 5 behavior with future.compatibilityVersion: 5.",false,"\u002Fimages\u002Fblog\u002Fnuxt-4-vs-nuxt-3\u002Fcard.png",{},true,"\u002Fblog\u002Fnuxt-4-vs-nuxt-3","6 min read",{"title":5,"description":488},"Nuxt 4 vs Nuxt 3 Differences: What's New and What Breaks","blog\u002Fnuxt-4-vs-nuxt-3",[507,508],"Nuxt","Migration","0Nvef-eWM9oXM4It8oFJUoTMPcLMf9A1QezXmvWbM4Y",1794654805875]