[{"data":1,"prerenderedAt":201},["ShallowReactive",2],{"\u002Fblog\u002Fgetting-started-with-nuxt-4":3},{"id":4,"title":5,"body":6,"category":184,"date":185,"description":186,"draft":187,"extension":188,"image":189,"meta":190,"navigation":191,"path":192,"seo":193,"stem":194,"tags":195,"__hash__":200},"blog\u002Fblog\u002Fgetting-started-with-nuxt-4.md","Getting Started with Nuxt 4",{"type":7,"value":8,"toc":179},"minimark",[9,18,23,37,41,56,60,71,172,175],[10,11,12,13,17],"p",{},"Nuxt 4 brings the ",[14,15,16],"code",{},"app\u002F"," directory as the default source root, enabling cleaner project organization and better separation between app code and configuration. Here's what you need to know to get started.",[19,20,22],"h2",{"id":21},"the-app-directory","The app\u002F Directory",[10,24,25,26,28,29,32,33,36],{},"In Nuxt 4, all your application code lives under ",[14,27,16],{},". This means your components, pages, composables, and plugins are all under one roof — separate from config files like ",[14,30,31],{},"nuxt.config.ts"," and ",[14,34,35],{},"content.config.ts"," that live at the project root.",[19,38,40],{"id":39},"ssr-by-default","SSR by Default",[10,42,43,44,47,48,51,52,55],{},"Nuxt 4 ships with SSR enabled by default, which means better SEO, faster initial paint, and cleaner hydration. If you've been building SPAs with ",[14,45,46],{},"ssr: false",", the migration is mostly about ensuring your data fetching uses ",[14,49,50],{},"useAsyncData"," or ",[14,53,54],{},"useFetch"," instead of lifecycle hooks.",[19,57,59],{"id":58},"content-v3-and-the-new-query-api","Content v3 and the New Query API",[10,61,62,63,66,67,70],{},"Nuxt Content v3 introduces a new ",[14,64,65],{},"queryCollection"," API that replaces ",[14,68,69],{},"queryContent",". It's schema-driven via Zod, which means you get full TypeScript inference on your content fields.",[72,73,78],"pre",{"className":74,"code":75,"language":76,"meta":77,"style":77},"language-ts shiki shiki-themes github-light github-dark","const { data: posts } = await useAsyncData('posts', () =>\n  queryCollection('blog').order('date', 'DESC').all()\n)\n","ts","",[14,79,80,130,166],{"__ignoreMap":77},[81,82,85,89,93,97,100,104,107,110,113,117,120,124,127],"span",{"class":83,"line":84},"line",1,[81,86,88],{"class":87},"szBVR","const",[81,90,92],{"class":91},"sVt8B"," { ",[81,94,96],{"class":95},"s4XuR","data",[81,98,99],{"class":91},": ",[81,101,103],{"class":102},"sj4cs","posts",[81,105,106],{"class":91}," } ",[81,108,109],{"class":87},"=",[81,111,112],{"class":87}," await",[81,114,116],{"class":115},"sScJk"," useAsyncData",[81,118,119],{"class":91},"(",[81,121,123],{"class":122},"sZZnC","'posts'",[81,125,126],{"class":91},", () ",[81,128,129],{"class":87},"=>\n",[81,131,133,136,138,141,144,147,149,152,155,158,160,163],{"class":83,"line":132},2,[81,134,135],{"class":115},"  queryCollection",[81,137,119],{"class":91},[81,139,140],{"class":122},"'blog'",[81,142,143],{"class":91},").",[81,145,146],{"class":115},"order",[81,148,119],{"class":91},[81,150,151],{"class":122},"'date'",[81,153,154],{"class":91},", ",[81,156,157],{"class":122},"'DESC'",[81,159,143],{"class":91},[81,161,162],{"class":115},"all",[81,164,165],{"class":91},"()\n",[81,167,169],{"class":83,"line":168},3,[81,170,171],{"class":91},")\n",[10,173,174],{},"The shift toward explicit collection definitions makes large content sites much more maintainable.",[176,177,178],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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);}",{"title":77,"searchDepth":132,"depth":132,"links":180},[181,182,183],{"id":21,"depth":132,"text":22},{"id":39,"depth":132,"text":40},{"id":58,"depth":132,"text":59},"Development","2026-06-01","A practical walkthrough of the new features in Nuxt 4 — the app\u002F directory, improved SSR, and what changed from Nuxt 3.",false,"md",null,{},true,"\u002Fblog\u002Fgetting-started-with-nuxt-4",{"title":5,"description":186},"blog\u002Fgetting-started-with-nuxt-4",[196,197,198,199],"Nuxt","Vue","SSR","Frontend","9XT6xKbnF3RorEMmid_ogi15Ld3rom1nUPtHoE0_Q5E",1786243487611]