[{"data":1,"prerenderedAt":258},["ShallowReactive",2],{"home-posts":3},[4,202],{"id":5,"title":6,"body":7,"category":185,"date":186,"description":187,"draft":188,"extension":189,"image":190,"meta":191,"navigation":192,"path":193,"seo":194,"stem":195,"tags":196,"__hash__":201},"blog\u002Fblog\u002Fgetting-started-with-nuxt-4.md","Getting Started with Nuxt 4",{"type":8,"value":9,"toc":180},"minimark",[10,19,24,38,42,57,61,72,173,176],[11,12,13,14,18],"p",{},"Nuxt 4 brings the ",[15,16,17],"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.",[20,21,23],"h2",{"id":22},"the-app-directory","The app\u002F Directory",[11,25,26,27,29,30,33,34,37],{},"In Nuxt 4, all your application code lives under ",[15,28,17],{},". This means your components, pages, composables, and plugins are all under one roof — separate from config files like ",[15,31,32],{},"nuxt.config.ts"," and ",[15,35,36],{},"content.config.ts"," that live at the project root.",[20,39,41],{"id":40},"ssr-by-default","SSR by Default",[11,43,44,45,48,49,52,53,56],{},"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 ",[15,46,47],{},"ssr: false",", the migration is mostly about ensuring your data fetching uses ",[15,50,51],{},"useAsyncData"," or ",[15,54,55],{},"useFetch"," instead of lifecycle hooks.",[20,58,60],{"id":59},"content-v3-and-the-new-query-api","Content v3 and the New Query API",[11,62,63,64,67,68,71],{},"Nuxt Content v3 introduces a new ",[15,65,66],{},"queryCollection"," API that replaces ",[15,69,70],{},"queryContent",". It's schema-driven via Zod, which means you get full TypeScript inference on your content fields.",[73,74,79],"pre",{"className":75,"code":76,"language":77,"meta":78,"style":78},"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","",[15,80,81,131,167],{"__ignoreMap":78},[82,83,86,90,94,98,101,105,108,111,114,118,121,125,128],"span",{"class":84,"line":85},"line",1,[82,87,89],{"class":88},"szBVR","const",[82,91,93],{"class":92},"sVt8B"," { ",[82,95,97],{"class":96},"s4XuR","data",[82,99,100],{"class":92},": ",[82,102,104],{"class":103},"sj4cs","posts",[82,106,107],{"class":92}," } ",[82,109,110],{"class":88},"=",[82,112,113],{"class":88}," await",[82,115,117],{"class":116},"sScJk"," useAsyncData",[82,119,120],{"class":92},"(",[82,122,124],{"class":123},"sZZnC","'posts'",[82,126,127],{"class":92},", () ",[82,129,130],{"class":88},"=>\n",[82,132,134,137,139,142,145,148,150,153,156,159,161,164],{"class":84,"line":133},2,[82,135,136],{"class":116},"  queryCollection",[82,138,120],{"class":92},[82,140,141],{"class":123},"'blog'",[82,143,144],{"class":92},").",[82,146,147],{"class":116},"order",[82,149,120],{"class":92},[82,151,152],{"class":123},"'date'",[82,154,155],{"class":92},", ",[82,157,158],{"class":123},"'DESC'",[82,160,144],{"class":92},[82,162,163],{"class":116},"all",[82,165,166],{"class":92},"()\n",[82,168,170],{"class":84,"line":169},3,[82,171,172],{"class":92},")\n",[11,174,175],{},"The shift toward explicit collection definitions makes large content sites much more maintainable.",[177,178,179],"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":78,"searchDepth":133,"depth":133,"links":181},[182,183,184],{"id":22,"depth":133,"text":23},{"id":40,"depth":133,"text":41},{"id":59,"depth":133,"text":60},"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":6,"description":187},"blog\u002Fgetting-started-with-nuxt-4",[197,198,199,200],"Nuxt","Vue","SSR","Frontend","9XT6xKbnF3RorEMmid_ogi15Ld3rom1nUPtHoE0_Q5E",{"id":203,"title":204,"body":205,"category":185,"date":247,"description":248,"draft":188,"extension":189,"image":190,"meta":249,"navigation":192,"path":250,"seo":251,"stem":252,"tags":253,"__hash__":257},"blog\u002Fblog\u002Fwhy-typescript-matters.md","Why TypeScript Matters More Than Ever in 2026",{"type":8,"value":206,"toc":242},[207,210,214,217,221,224,228,239],[11,208,209],{},"Eight years into my frontend career, TypeScript has become one of the most impactful tools in my stack. Not because it's trendy — but because it actively makes the feedback loop faster and the codebase more maintainable.",[20,211,213],{"id":212},"the-obvious-benefits","The Obvious Benefits",[11,215,216],{},"Everyone knows about autocomplete and type errors caught at compile time. Those are real and valuable. But the compounding benefit is what gets you: when you refactor a constants file six months later, TypeScript tells you every single place that breaks before you ship.",[20,218,220],{"id":219},"types-as-documentation","Types as Documentation",[11,222,223],{},"A well-typed interface is documentation that doesn't go stale. If you look at a function signature with typed parameters and return values, you don't need to read the implementation to understand how to use it. This matters on teams, but it also matters when you're returning to your own code after three months away.",[20,225,227],{"id":226},"the-migration-story","The Migration Story",[11,229,230,231,234,235,238],{},"If you're on a JavaScript codebase and considering the switch — start with ",[15,232,233],{},"checkJs"," and JSDoc annotations. You get most of the benefits without a full rewrite. Once you're comfortable, migrate file by file with ",[15,236,237],{},"allowJs: true"," in your tsconfig.",[11,240,241],{},"The overhead is front-loaded. The payoff compounds.",{"title":78,"searchDepth":133,"depth":133,"links":243},[244,245,246],{"id":212,"depth":133,"text":213},{"id":219,"depth":133,"text":220},{"id":226,"depth":133,"text":227},"2026-05-15","TypeScript has become the de-facto standard for serious frontend development. Here's why adopting it early pays dividends across every project.",{},"\u002Fblog\u002Fwhy-typescript-matters",{"title":204,"description":248},"blog\u002Fwhy-typescript-matters",[254,255,200,256],"TypeScript","JavaScript","Best Practices","fJu5iOi8qWLd8tcyz5vnoqUg6lwWDCgsA1QjhySZwGw",1786243487510]