[{"data":1,"prerenderedAt":328},["ShallowReactive",2],{"blog-post-/blog/getting-started-with-nuxt/":3},{"id":4,"title":5,"body":6,"description":301,"extension":302,"meta":303,"navigation":321,"path":323,"seo":324,"sitemap":325,"stem":326,"__hash__":327},"content/blog/getting-started-with-nuxt.md","Getting Started with Nuxt 3 - A Complete Beginner Guide",{"type":7,"value":8,"toc":294},"minimark",[9,14,18,23,26,61,65,68,126,130,133,141,145,152,239,242,246,249,287,290],[10,11,13],"h1",{"id":12},"getting-started-with-nuxt-3","Getting Started with Nuxt 3",[15,16,17],"p",{},"Nuxt 3 is a powerful framework built on top of Vue 3 that makes building modern web applications a breeze. In this comprehensive guide, we'll walk through everything you need to know to get started.",[19,20,22],"h2",{"id":21},"why-choose-nuxt-3","Why Choose Nuxt 3?",[15,24,25],{},"Nuxt 3 offers several compelling advantages:",[27,28,29,37,43,49,55],"ul",{},[30,31,32,36],"li",{},[33,34,35],"strong",{},"Server-Side Rendering (SSR)"," - Better SEO and faster initial page loads",[30,38,39,42],{},[33,40,41],{},"Auto-imports"," - No need to manually import components and composables",[30,44,45,48],{},[33,46,47],{},"File-based routing"," - Automatic route generation from your file structure",[30,50,51,54],{},[33,52,53],{},"TypeScript support"," - First-class TypeScript integration",[30,56,57,60],{},[33,58,59],{},"Hybrid rendering"," - Mix SSR, SSG, and CSR as needed",[19,62,64],{"id":63},"installation","Installation",[15,66,67],{},"Getting started is simple. Create a new Nuxt 3 project with:",[69,70,75],"pre",{"className":71,"code":72,"language":73,"meta":74,"style":74},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx nuxi@latest init my-app\ncd my-app\nnpm install\nnpm run dev\n","bash","",[76,77,78,97,106,115],"code",{"__ignoreMap":74},[79,80,83,87,91,94],"span",{"class":81,"line":82},"line",1,[79,84,86],{"class":85},"sBMFI","npx",[79,88,90],{"class":89},"sfazB"," nuxi@latest",[79,92,93],{"class":89}," init",[79,95,96],{"class":89}," my-app\n",[79,98,100,104],{"class":81,"line":99},2,[79,101,103],{"class":102},"s2Zo4","cd",[79,105,96],{"class":89},[79,107,109,112],{"class":81,"line":108},3,[79,110,111],{"class":85},"npm",[79,113,114],{"class":89}," install\n",[79,116,118,120,123],{"class":81,"line":117},4,[79,119,111],{"class":85},[79,121,122],{"class":89}," run",[79,124,125],{"class":89}," dev\n",[19,127,129],{"id":128},"project-structure","Project Structure",[15,131,132],{},"A typical Nuxt 3 project structure looks like this:",[69,134,139],{"className":135,"code":137,"language":138},[136],"language-text","my-app/\n├── pages/\n├── components/\n├── composables/\n├── layouts/\n├── public/\n├── server/\n└── nuxt.config.ts\n","text",[76,140,137],{"__ignoreMap":74},[19,142,144],{"id":143},"creating-your-first-page","Creating Your First Page",[15,146,147,148,151],{},"Create a new file ",[76,149,150],{},"pages/index.vue",":",[69,153,157],{"className":154,"code":155,"language":156,"meta":74,"style":74},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>Welcome to Nuxt 3!\u003C/h1>\n    \u003Cp>This is your first page.\u003C/p>\n  \u003C/div>\n\u003C/template>\n","vue",[76,158,159,172,182,203,220,230],{"__ignoreMap":74},[79,160,161,165,169],{"class":81,"line":82},[79,162,164],{"class":163},"sMK4o","\u003C",[79,166,168],{"class":167},"swJcz","template",[79,170,171],{"class":163},">\n",[79,173,174,177,180],{"class":81,"line":99},[79,175,176],{"class":163},"  \u003C",[79,178,179],{"class":167},"div",[79,181,171],{"class":163},[79,183,184,187,189,192,196,199,201],{"class":81,"line":108},[79,185,186],{"class":163},"    \u003C",[79,188,10],{"class":167},[79,190,191],{"class":163},">",[79,193,195],{"class":194},"sTEyZ","Welcome to Nuxt 3!",[79,197,198],{"class":163},"\u003C/",[79,200,10],{"class":167},[79,202,171],{"class":163},[79,204,205,207,209,211,214,216,218],{"class":81,"line":117},[79,206,186],{"class":163},[79,208,15],{"class":167},[79,210,191],{"class":163},[79,212,213],{"class":194},"This is your first page.",[79,215,198],{"class":163},[79,217,15],{"class":167},[79,219,171],{"class":163},[79,221,223,226,228],{"class":81,"line":222},5,[79,224,225],{"class":163},"  \u003C/",[79,227,179],{"class":167},[79,229,171],{"class":163},[79,231,233,235,237],{"class":81,"line":232},6,[79,234,198],{"class":163},[79,236,168],{"class":167},[79,238,171],{"class":163},[15,240,241],{},"That's it! Nuxt automatically creates a route for this page.",[19,243,245],{"id":244},"next-steps","Next Steps",[15,247,248],{},"Now that you have a basic understanding, explore:",[250,251,252,265,275,281],"ol",{},[30,253,254,257,258,261,262],{},[33,255,256],{},"Data Fetching"," - Learn about ",[76,259,260],{},"useFetch"," and ",[76,263,264],{},"useAsyncData",[30,266,267,270,271,274],{},[33,268,269],{},"State Management"," - Use ",[76,272,273],{},"useState"," for reactive state",[30,276,277,280],{},[33,278,279],{},"Middleware"," - Add authentication and route guards",[30,282,283,286],{},[33,284,285],{},"Modules"," - Extend functionality with the Nuxt ecosystem",[15,288,289],{},"Happy coding! 🚀",[291,292,293],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":74,"searchDepth":99,"depth":99,"links":295},[296,297,298,299,300],{"id":21,"depth":99,"text":22},{"id":63,"depth":99,"text":64},{"id":128,"depth":99,"text":129},{"id":143,"depth":99,"text":144},{"id":244,"depth":99,"text":245},"Learn how to set up and build your first Nuxt 3 app from scratch. Covers file-based routing, SSR, layouts, data fetching, and deployment. The complete Nuxt 3 beginner tutorial.","md",{"author":304,"date":305,"image":306,"category":307,"tags":308,"featured":321,"draft":322},"WonderCoder Team","2025-11-20T10:00:00.000Z","/img/nuxtcontent/nuxt.png","Web Development",[309,156,310,311,312,313,314,315,316,317,318,319,320],"nuxt","javascript","tutorial","nuxt3-tutorial","nuxt3-beginner-guide","how-to-start-nuxt3","nuxt3-setup","vue3-framework","nuxt3-ssr","nuxt3-routing","nuxt-for-beginners","nuxt3-complete-guide",true,false,"/blog/getting-started-with-nuxt",{"title":5,"description":301},{"loc":323},"blog/getting-started-with-nuxt","ekVD8UQnfZyaQKxLQYnhI2_7iht_TNsk8saUPY0BUss",1782986781101]