[{"data":1,"prerenderedAt":196},["ShallowReactive",2],{"blog-getting-started-with-nuxt":3},{"id":4,"title":5,"body":6,"date":182,"description":183,"extension":184,"featured":185,"meta":186,"navigation":187,"path":188,"seo":189,"stem":190,"tags":191,"__hash__":195},"blog\u002Fblog\u002Fgetting-started-with-nuxt.md","Getting Started with Nuxt 3",{"type":7,"value":8,"toc":171},"minimark",[9,13,18,21,50,54,59,67,71,74,78,84,88,91,95,98,154,157,161,164,167],[10,11,12],"p",{},"Nuxt 3 is a powerful framework for building modern web applications with Vue.js. In this post, I'll walk you through the key features and benefits of using Nuxt 3 for your next project.",[14,15,17],"h2",{"id":16},"why-choose-nuxt-3","Why Choose Nuxt 3?",[10,19,20],{},"Nuxt 3 brings several improvements over its predecessor:",[22,23,24,32,38,44],"ul",{},[25,26,27,31],"li",{},[28,29,30],"strong",{},"Better Performance",": Built on Vite for faster development",[25,33,34,37],{},[28,35,36],{},"TypeScript Support",": First-class TypeScript support out of the box",[25,39,40,43],{},[28,41,42],{},"Auto-imports",": Automatic imports for components, composables, and utilities",[25,45,46,49],{},[28,47,48],{},"Server-Side Rendering",": Built-in SSR capabilities for better SEO",[14,51,53],{"id":52},"key-features","Key Features",[55,56,58],"h3",{"id":57},"_1-file-based-routing","1. File-based Routing",[10,60,61,62,66],{},"Nuxt automatically generates routes based on your file structure in the ",[63,64,65],"code",{},"pages\u002F"," directory.",[55,68,70],{"id":69},"_2-auto-imports","2. Auto-imports",[10,72,73],{},"No need to manually import Vue composables or Nuxt utilities - they're available globally.",[55,75,77],{"id":76},"_3-server-api-routes","3. Server API Routes",[10,79,80,81,66],{},"Create API endpoints easily with the ",[63,82,83],{},"server\u002Fapi\u002F",[55,85,87],{"id":86},"_4-modules-ecosystem","4. Modules Ecosystem",[10,89,90],{},"Leverage the rich ecosystem of Nuxt modules to extend functionality.",[14,92,94],{"id":93},"getting-started","Getting Started",[10,96,97],{},"To create a new Nuxt 3 project:",[99,100,105],"pre",{"className":101,"code":102,"language":103,"meta":104,"style":104},"language-bash shiki shiki-themes vesper","npx nuxi@latest init my-nuxt-app\ncd my-nuxt-app\nnpm install\nnpm run dev\n","bash","",[63,106,107,126,134,143],{"__ignoreMap":104},[108,109,112,116,120,123],"span",{"class":110,"line":111},"line",1,[108,113,115],{"class":114},"sNEDb","npx",[108,117,119],{"class":118},"sZOz5"," nuxi@latest",[108,121,122],{"class":118}," init",[108,124,125],{"class":118}," my-nuxt-app\n",[108,127,129,132],{"class":110,"line":128},2,[108,130,131],{"class":114},"cd",[108,133,125],{"class":118},[108,135,137,140],{"class":110,"line":136},3,[108,138,139],{"class":114},"npm",[108,141,142],{"class":118}," install\n",[108,144,146,148,151],{"class":110,"line":145},4,[108,147,139],{"class":114},[108,149,150],{"class":118}," run",[108,152,153],{"class":118}," dev\n",[10,155,156],{},"That's it! You now have a running Nuxt 3 application.",[14,158,160],{"id":159},"conclusion","Conclusion",[10,162,163],{},"Nuxt 3 provides an excellent developer experience with powerful features for building modern web applications. Whether you're building a simple website or a complex application, Nuxt 3 has the tools you need.",[10,165,166],{},"Happy coding!",[168,169,170],"style",{},"html pre.shiki code .sNEDb, html code.shiki .sNEDb{--shiki-default:#FFC799}html pre.shiki code .sZOz5, html code.shiki .sZOz5{--shiki-default:#99FFE4}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);}",{"title":104,"searchDepth":128,"depth":128,"links":172},[173,174,180,181],{"id":16,"depth":128,"text":17},{"id":52,"depth":128,"text":53,"children":175},[176,177,178,179],{"id":57,"depth":136,"text":58},{"id":69,"depth":136,"text":70},{"id":76,"depth":136,"text":77},{"id":86,"depth":136,"text":87},{"id":93,"depth":128,"text":94},{"id":159,"depth":128,"text":160},"2025-06-24","A comprehensive guide to building modern web applications with Nuxt 3.","md",false,{},true,"\u002Fblog\u002Fgetting-started-with-nuxt",{"title":5,"description":183},"blog\u002Fgetting-started-with-nuxt",[192,193,194],"nuxt","vue","web-development","oWMRx9uyf2-y-usxijffwr5GMoU7wxazfgkCLR8ZwWU",1779304901380]