[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-en-nuxt4-new-features":3},{"id":4,"title":5,"body":6,"category":376,"date":377,"description":378,"extension":379,"image":380,"meta":381,"navigation":391,"path":392,"readTime":143,"seo":393,"stem":394,"__hash__":395},"blog_en/blog/en/nuxt4-new-features.md","Nuxt 4: Game-Changing New Features",{"type":7,"value":8,"toc":364},"minimark",[9,13,18,26,36,39,43,48,51,74,78,153,157,160,180,291,295,302,323,327,350,354,357,360],[10,11,12],"p",{},"Nuxt 4 has arrived with its share of major innovations. Let's explore together the most impactful changes for your projects.",[14,15,17],"h2",{"id":16},"new-project-structure","New project structure",[10,19,20,21,25],{},"Nuxt 4 introduces a new structure with the ",[22,23,24],"code",{},"app/"," folder that centralizes all your application files:",[27,28,33],"pre",{"className":29,"code":31,"language":32},[30],"language-text","my-project/\n├── app/\n│   ├── app.vue\n│   ├── components/\n│   ├── composables/\n│   ├── layouts/\n│   ├── middleware/\n│   ├── pages/\n│   └── plugins/\n├── content/\n├── public/\n├── server/\n└── nuxt.config.ts\n","text",[22,34,31],{"__ignoreMap":35},"",[10,37,38],{},"This organization brings better separation of concerns and a more predictable structure.",[14,40,42],{"id":41},"improved-performance","Improved performance",[44,45,47],"h3",{"id":46},"optimized-hydration","Optimized hydration",[10,49,50],{},"Nuxt 4 significantly improves First Contentful Paint time thanks to:",[52,53,54,62,68],"ul",{},[55,56,57,61],"li",{},[58,59,60],"strong",{},"Lazy hydration",": Deferred hydration of non-visible components",[55,63,64,67],{},[58,65,66],{},"Island architecture",": Isolated components with their own context",[55,69,70,73],{},[58,71,72],{},"Streaming SSR",": Progressive HTML delivery",[44,75,77],{"id":76},"lighter-bundle","Lighter bundle",[27,79,83],{"className":80,"code":81,"language":82,"meta":35,"style":35},"language-typescript shiki shiki-themes github-dark","// nuxt.config.ts\nexport default defineNuxtConfig({\n  experimental: {\n    treeshakeClientOnly: true,\n    componentIslands: true,\n  },\n});\n","typescript",[22,84,85,94,112,118,131,141,147],{"__ignoreMap":35},[86,87,90],"span",{"class":88,"line":89},"line",1,[86,91,93],{"class":92},"sAwPA","// nuxt.config.ts\n",[86,95,97,101,104,108],{"class":88,"line":96},2,[86,98,100],{"class":99},"snl16","export",[86,102,103],{"class":99}," default",[86,105,107],{"class":106},"svObZ"," defineNuxtConfig",[86,109,111],{"class":110},"s95oV","({\n",[86,113,115],{"class":88,"line":114},3,[86,116,117],{"class":110},"  experimental: {\n",[86,119,121,124,128],{"class":88,"line":120},4,[86,122,123],{"class":110},"    treeshakeClientOnly: ",[86,125,127],{"class":126},"sDLfK","true",[86,129,130],{"class":110},",\n",[86,132,134,137,139],{"class":88,"line":133},5,[86,135,136],{"class":110},"    componentIslands: ",[86,138,127],{"class":126},[86,140,130],{"class":110},[86,142,144],{"class":88,"line":143},6,[86,145,146],{"class":110},"  },\n",[86,148,150],{"class":88,"line":149},7,[86,151,152],{"class":110},"});\n",[14,154,156],{"id":155},"nuxt-content-v3","Nuxt Content v3",[10,158,159],{},"Nuxt Content integration has been redesigned with:",[52,161,162,168,174],{},[55,163,164,167],{},[58,165,166],{},"Typed collections",": Zod schemas for your content",[55,169,170,173],{},[58,171,172],{},"Improved queries",": More intuitive and performant API",[55,175,176,179],{},[58,177,178],{},"MDC support",": Markdown with integrated Vue components",[27,181,183],{"className":80,"code":182,"language":82,"meta":35,"style":35},"// content.config.ts\nexport default defineContentConfig({\n  collections: {\n    blog: defineCollection({\n      type: \"page\",\n      source: \"blog/**/*.md\",\n      schema: z.object({\n        title: z.string(),\n        date: z.string(),\n      }),\n    }),\n  },\n});\n",[22,184,185,190,201,206,216,227,237,247,259,269,275,281,286],{"__ignoreMap":35},[86,186,187],{"class":88,"line":89},[86,188,189],{"class":92},"// content.config.ts\n",[86,191,192,194,196,199],{"class":88,"line":96},[86,193,100],{"class":99},[86,195,103],{"class":99},[86,197,198],{"class":106}," defineContentConfig",[86,200,111],{"class":110},[86,202,203],{"class":88,"line":114},[86,204,205],{"class":110},"  collections: {\n",[86,207,208,211,214],{"class":88,"line":120},[86,209,210],{"class":110},"    blog: ",[86,212,213],{"class":106},"defineCollection",[86,215,111],{"class":110},[86,217,218,221,225],{"class":88,"line":133},[86,219,220],{"class":110},"      type: ",[86,222,224],{"class":223},"sU2Wk","\"page\"",[86,226,130],{"class":110},[86,228,229,232,235],{"class":88,"line":143},[86,230,231],{"class":110},"      source: ",[86,233,234],{"class":223},"\"blog/**/*.md\"",[86,236,130],{"class":110},[86,238,239,242,245],{"class":88,"line":149},[86,240,241],{"class":110},"      schema: z.",[86,243,244],{"class":106},"object",[86,246,111],{"class":110},[86,248,250,253,256],{"class":88,"line":249},8,[86,251,252],{"class":110},"        title: z.",[86,254,255],{"class":106},"string",[86,257,258],{"class":110},"(),\n",[86,260,262,265,267],{"class":88,"line":261},9,[86,263,264],{"class":110},"        date: z.",[86,266,255],{"class":106},[86,268,258],{"class":110},[86,270,272],{"class":88,"line":271},10,[86,273,274],{"class":110},"      }),\n",[86,276,278],{"class":88,"line":277},11,[86,279,280],{"class":110},"    }),\n",[86,282,284],{"class":88,"line":283},12,[86,285,146],{"class":110},[86,287,289],{"class":88,"line":288},13,[86,290,152],{"class":110},[14,292,294],{"id":293},"migrating-from-nuxt-3","Migrating from Nuxt 3",[10,296,297,298,301],{},"Migration is made easy with the ",[22,299,300],{},"nuxt-migrate"," tool:",[27,303,307],{"className":304,"code":305,"language":306,"meta":35,"style":35},"language-bash shiki shiki-themes github-dark","npx nuxi@latest upgrade --dedupe\n","bash",[22,308,309],{"__ignoreMap":35},[86,310,311,314,317,320],{"class":88,"line":89},[86,312,313],{"class":106},"npx",[86,315,316],{"class":223}," nuxi@latest",[86,318,319],{"class":223}," upgrade",[86,321,322],{"class":126}," --dedupe\n",[44,324,326],{"id":325},"major-changes-to-note","Major changes to note",[328,329,330,338,344],"ol",{},[55,331,332,335,336],{},[58,333,334],{},"New folder structure",": Move your files to ",[22,337,24],{},[55,339,340,343],{},[58,341,342],{},"Content v3",": Update your Content queries",[55,345,346,349],{},[58,347,348],{},"Compatibility Date",": New format required",[14,351,353],{"id":352},"conclusion","Conclusion",[10,355,356],{},"Nuxt 4 represents a major evolution of the Vue/Nuxt ecosystem. These performance and DX improvements make it an even more solid choice for your modern projects.",[10,358,359],{},"Have you already migrated to Nuxt 4? Share your experience in the comments!",[361,362,363],"style",{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}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 pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}",{"title":35,"searchDepth":96,"depth":96,"links":365},[366,367,371,372,375],{"id":16,"depth":96,"text":17},{"id":41,"depth":96,"text":42,"children":368},[369,370],{"id":46,"depth":114,"text":47},{"id":76,"depth":114,"text":77},{"id":155,"depth":96,"text":156},{"id":293,"depth":96,"text":294,"children":373},[374],{"id":325,"depth":114,"text":326},{"id":352,"depth":96,"text":353},"Web Development","2025-12-18T09:00:00+01:00","Discover the new features of Nuxt 4, from the new project structure to performance improvements.","md","/images/blog/en/nuxt4-new-features.png",{"tags":382,"author":387,"locale":388,"slug":389,"draft":390,"sitemap":391},[383,384,385,386],"Nuxt","Vue.js","SSR","Performance","Aboubakar Sidik Faha","en","nuxt4-new-features",false,true,"/blog/en/nuxt4-new-features",{"title":5,"description":378},"blog/en/nuxt4-new-features","iSmsgAalAkVAE-kR6b0c8I7vNxTLSTuvSK9ZRnSF_wM"]