[{"data":1,"prerenderedAt":194},["ShallowReactive",2],{"blog-getting-started-with-nuxt":3,"surroundingPosts-getting-started-with-nuxt":188},{"id":4,"title":5,"author":6,"body":7,"date":174,"description":175,"extension":176,"meta":177,"navigation":178,"path":179,"seo":180,"stem":181,"tags":182,"__hash__":187},"blog/blog/getting-started-with-nuxt.md","Getting Started with Nuxt 4","John Doe",{"type":8,"value":9,"toc":164},"minimark",[10,14,19,22,51,55,58,116,120,125,136,140,143,147,150,154,157,160],[11,12,13],"p",{},"Nuxt 4 is the latest version of the Vue.js framework that makes it easy to build modern web applications. In this guide, we'll explore the key features and improvements that make Nuxt 4 a powerful choice for developers.",[15,16,18],"h2",{"id":17},"whats-new-in-nuxt-4","What's New in Nuxt 4",[11,20,21],{},"Nuxt 4 brings several exciting improvements:",[23,24,25,33,39,45],"ul",{},[26,27,28,32],"li",{},[29,30,31],"strong",{},"Better Performance",": Optimized build process and runtime performance",[26,34,35,38],{},[29,36,37],{},"Enhanced Developer Experience",": Improved TypeScript support and better debugging tools",[26,40,41,44],{},[29,42,43],{},"New Features",": Server-side rendering improvements and better static site generation",[26,46,47,50],{},[29,48,49],{},"Ecosystem Updates",": Updated dependencies and better integration with modern tools",[15,52,54],{"id":53},"installation","Installation",[11,56,57],{},"Getting started with Nuxt 4 is straightforward. You can create a new project using the official CLI:",[59,60,65],"pre",{"className":61,"code":62,"language":63,"meta":64,"style":64},"language-bash shiki shiki-themes github-light github-dark","npx nuxi@latest init my-nuxt-app\ncd my-nuxt-app\nnpm install\nnpm run dev\n","bash","",[66,67,68,87,96,105],"code",{"__ignoreMap":64},[69,70,73,77,81,84],"span",{"class":71,"line":72},"line",1,[69,74,76],{"class":75},"sScJk","npx",[69,78,80],{"class":79},"sZZnC"," nuxi@latest",[69,82,83],{"class":79}," init",[69,85,86],{"class":79}," my-nuxt-app\n",[69,88,90,94],{"class":71,"line":89},2,[69,91,93],{"class":92},"sj4cs","cd",[69,95,86],{"class":79},[69,97,99,102],{"class":71,"line":98},3,[69,100,101],{"class":75},"npm",[69,103,104],{"class":79}," install\n",[69,106,108,110,113],{"class":71,"line":107},4,[69,109,101],{"class":75},[69,111,112],{"class":79}," run",[69,114,115],{"class":79}," dev\n",[15,117,119],{"id":118},"key-concepts","Key Concepts",[121,122,124],"h3",{"id":123},"pages-and-routing","Pages and Routing",[11,126,127,128,131,132,135],{},"Nuxt 4 uses file-based routing, which means your file structure determines your application's routes. Simply create a ",[66,129,130],{},".vue"," file in the ",[66,133,134],{},"pages"," directory, and it becomes a route.",[121,137,139],{"id":138},"components","Components",[11,141,142],{},"Components in Nuxt 4 are automatically imported, so you can use them anywhere in your application without explicit imports.",[121,144,146],{"id":145},"server-side-rendering","Server-Side Rendering",[11,148,149],{},"Nuxt 4 excels at server-side rendering, providing better SEO and performance for your applications.",[15,151,153],{"id":152},"conclusion","Conclusion",[11,155,156],{},"Nuxt 4 is an excellent choice for building modern web applications. Its powerful features, excellent developer experience, and strong ecosystem make it a top choice for Vue.js developers.",[11,158,159],{},"Whether you're building a simple blog or a complex web application, Nuxt 4 provides the tools and flexibility you need to succeed.",[161,162,163],"style",{},"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 pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#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 .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":64,"searchDepth":89,"depth":89,"links":165},[166,167,168,173],{"id":17,"depth":89,"text":18},{"id":53,"depth":89,"text":54},{"id":118,"depth":89,"text":119,"children":169},[170,171,172],{"id":123,"depth":98,"text":124},{"id":138,"depth":98,"text":139},{"id":145,"depth":98,"text":146},{"id":152,"depth":89,"text":153},"2024-01-15","Learn how to build modern web applications with Nuxt 4, the latest version of the Vue.js framework. This comprehensive guide covers everything from installation to deployment.","md",{},true,"/blog/getting-started-with-nuxt",{"title":5,"description":175},"blog/getting-started-with-nuxt",[183,184,185,186],"nuxt","vue","javascript","tutorial","v4WME2ZdYSs0fR5iCslWnwtRODPwUn-uivVCfCBXyl8",[189,193],{"title":190,"path":191,"stem":192,"children":-1},"Vue 3 Composition API: A Complete Guide","/blog/vue-composition-api-guide","blog/vue-composition-api-guide",null,1764590496321]