[{"data":1,"prerenderedAt":415},["ShallowReactive",2],{"blog-posts":3},[4,322],{"id":5,"title":6,"body":7,"description":308,"extension":309,"meta":310,"navigation":317,"path":318,"seo":319,"stem":320,"__hash__":321},"content/blog/building-with-nuxt-4.md","Building Modern Websites with Nuxt 4",{"type":8,"value":9,"toc":301},"minimark",[10,14,18,23,31,41,45,48,82,182,186,189,200,204,211,290,294,297],[11,12,6],"h1",{"id":13},"building-modern-websites-with-nuxt-4",[15,16,17],"p",{},"Nuxt 4 brings a host of improvements that make building modern web applications a joy. Let's explore some of the key features that make it stand out.",[19,20,22],"h2",{"id":21},"the-power-of-file-based-routing","The Power of File-Based Routing",[15,24,25,26,30],{},"One of Nuxt's strongest features is its file-based routing system. Simply create a file in the ",[27,28,29],"code",{},"pages"," directory, and you've got a route.",[32,33,38],"pre",{"className":34,"code":36,"language":37},[35],"language-text","pages/\n├── index.vue        → /\n├── about.vue        → /about\n└── blog/\n    ├── index.vue    → /blog\n    └── [slug].vue   → /blog/:slug\n","text",[27,39,36],{"__ignoreMap":40},"",[19,42,44],{"id":43},"auto-imports","Auto-Imports",[15,46,47],{},"Gone are the days of manually importing every component and composable. Nuxt automatically imports:",[49,50,51,59,65,71],"ul",{},[52,53,54,55,58],"li",{},"Components from the ",[27,56,57],{},"components/"," directory",[52,60,61,62,58],{},"Composables from the ",[27,63,64],{},"composables/",[52,66,67,68,58],{},"Utils from the ",[27,69,70],{},"utils/",[52,72,73,74,77,78,81],{},"Vue's reactivity APIs (",[27,75,76],{},"ref",", ",[27,79,80],{},"computed",", etc.)",[32,83,87],{"className":84,"code":85,"language":86,"meta":40,"style":40},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup>\n// No imports needed!\nconst count = ref(0)\nconst doubled = computed(() => count.value * 2)\n\u003C/script>\n","vue",[27,88,89,109,116,142,172],{"__ignoreMap":40},[90,91,94,98,102,106],"span",{"class":92,"line":93},"line",1,[90,95,97],{"class":96},"sVt8B","\u003C",[90,99,101],{"class":100},"s9eBZ","script",[90,103,105],{"class":104},"sScJk"," setup",[90,107,108],{"class":96},">\n",[90,110,112],{"class":92,"line":111},2,[90,113,115],{"class":114},"sJ8bj","// No imports needed!\n",[90,117,119,123,127,130,133,136,139],{"class":92,"line":118},3,[90,120,122],{"class":121},"szBVR","const",[90,124,126],{"class":125},"sj4cs"," count",[90,128,129],{"class":121}," =",[90,131,132],{"class":104}," ref",[90,134,135],{"class":96},"(",[90,137,138],{"class":125},"0",[90,140,141],{"class":96},")\n",[90,143,145,147,150,152,155,158,161,164,167,170],{"class":92,"line":144},4,[90,146,122],{"class":121},[90,148,149],{"class":125}," doubled",[90,151,129],{"class":121},[90,153,154],{"class":104}," computed",[90,156,157],{"class":96},"(() ",[90,159,160],{"class":121},"=>",[90,162,163],{"class":96}," count.value ",[90,165,166],{"class":121},"*",[90,168,169],{"class":125}," 2",[90,171,141],{"class":96},[90,173,175,178,180],{"class":92,"line":174},5,[90,176,177],{"class":96},"\u003C/",[90,179,101],{"class":100},[90,181,108],{"class":96},[19,183,185],{"id":184},"server-side-rendering-by-default","Server-Side Rendering by Default",[15,187,188],{},"Nuxt 4 provides SSR out of the box, which means:",[49,190,191,194,197],{},[52,192,193],{},"Better SEO with fully rendered HTML",[52,195,196],{},"Faster initial page loads",[52,198,199],{},"Improved performance on slower devices",[19,201,203],{"id":202},"hybrid-rendering","Hybrid Rendering",[15,205,206,207,210],{},"With ",[27,208,209],{},"routeRules",", you can configure different rendering strategies per route:",[32,212,216],{"className":213,"code":214,"language":215,"meta":40,"style":40},"language-ts shiki shiki-themes github-light github-dark","export default defineNuxtConfig({\n  routeRules: {\n    '/': { prerender: true },\n    '/api/**': { cors: true },\n    '/admin/**': { ssr: false }\n  }\n})\n","ts",[27,217,218,232,237,252,264,278,284],{"__ignoreMap":40},[90,219,220,223,226,229],{"class":92,"line":93},[90,221,222],{"class":121},"export",[90,224,225],{"class":121}," default",[90,227,228],{"class":104}," defineNuxtConfig",[90,230,231],{"class":96},"({\n",[90,233,234],{"class":92,"line":111},[90,235,236],{"class":96},"  routeRules: {\n",[90,238,239,243,246,249],{"class":92,"line":118},[90,240,242],{"class":241},"sZZnC","    '/'",[90,244,245],{"class":96},": { prerender: ",[90,247,248],{"class":125},"true",[90,250,251],{"class":96}," },\n",[90,253,254,257,260,262],{"class":92,"line":144},[90,255,256],{"class":241},"    '/api/**'",[90,258,259],{"class":96},": { cors: ",[90,261,248],{"class":125},[90,263,251],{"class":96},[90,265,266,269,272,275],{"class":92,"line":174},[90,267,268],{"class":241},"    '/admin/**'",[90,270,271],{"class":96},": { ssr: ",[90,273,274],{"class":125},"false",[90,276,277],{"class":96}," }\n",[90,279,281],{"class":92,"line":280},6,[90,282,283],{"class":96},"  }\n",[90,285,287],{"class":92,"line":286},7,[90,288,289],{"class":96},"})\n",[19,291,293],{"id":292},"conclusion","Conclusion",[15,295,296],{},"Nuxt 4 continues to push the boundaries of what's possible with Vue.js. Whether you're building a simple blog or a complex web application, it provides the tools you need to succeed.",[298,299,300],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":40,"searchDepth":111,"depth":111,"links":302},[303,304,305,306,307],{"id":21,"depth":111,"text":22},{"id":43,"depth":111,"text":44},{"id":184,"depth":111,"text":185},{"id":202,"depth":111,"text":203},{"id":292,"depth":111,"text":293},"A look at what makes Nuxt 4 great for building performant, SEO-friendly web applications.","md",{"date":311,"tags":312,"icon":316,"readingTime":174},"2024-02-03",[313,314,315],"Nuxt","Vue.js","Web Development","💚",true,"/blog/building-with-nuxt-4",{"title":6,"description":308},"blog/building-with-nuxt-4","8HfDue-ufbe8Zeg5Yk0ZuE6FxgaIst3F_FkDGv9ZqRk",{"id":323,"title":324,"body":325,"description":404,"extension":309,"meta":405,"navigation":317,"path":411,"seo":412,"stem":413,"__hash__":414},"content/blog/hello-world.md","Hello World - Welcome to My Blog",{"type":8,"value":326,"toc":399},[327,331,334,338,341,368,372,375,379,396],[11,328,330],{"id":329},"hello-world","Hello World!",[15,332,333],{},"Welcome to my blog! I'm excited to finally have a space where I can share my thoughts on web development, design patterns, and the ever-evolving world of technology.",[19,335,337],{"id":336},"what-to-expect","What to Expect",[15,339,340],{},"Here's what I'll be writing about:",[49,342,343,350,356,362],{},[52,344,345,349],{},[346,347,348],"strong",{},"Technical Deep Dives"," - Exploring Vue, Nuxt, TypeScript, and modern web development practices",[52,351,352,355],{},[346,353,354],{},"Project Breakdowns"," - Behind-the-scenes looks at how I approach different projects",[52,357,358,361],{},[346,359,360],{},"Tips & Tricks"," - Useful snippets and techniques I've picked up along the way",[52,363,364,367],{},[346,365,366],{},"Industry Insights"," - My take on trends and changes in the tech world",[19,369,371],{"id":370},"why-start-a-blog","Why Start a Blog?",[15,373,374],{},"After years of working on various projects and learning new things, I realized I have a lot to share. Writing helps me solidify my understanding of topics, and hopefully, my experiences can help others on their journey.",[19,376,378],{"id":377},"stay-connected","Stay Connected",[15,380,381,382,389,390,395],{},"Feel free to reach out if you have questions, want to collaborate, or just want to chat about tech. You can find me on ",[383,384,388],"a",{"href":385,"rel":386},"https://github.com/PrimoDevStudio",[387],"nofollow","GitHub"," or ",[383,391,394],{"href":392,"rel":393},"https://linkedin.com/in/primodevstudio",[387],"LinkedIn",".",[15,397,398],{},"Thanks for stopping by! 🚀",{"title":40,"searchDepth":111,"depth":111,"links":400},[401,402,403],{"id":336,"depth":111,"text":337},{"id":370,"depth":111,"text":371},{"id":377,"depth":111,"text":378},"Kicking off my blog where I share thoughts on web development, design patterns, and the latest tech.",{"date":406,"tags":407,"icon":410,"readingTime":111},"2024-02-04",[408,409],"General","Announcements","👋","/blog/hello-world",{"title":324,"description":404},"blog/hello-world","4MWfiIEvHCkWEAjG0LLVfGs222LbaYb22l0vrPZwbgw",1778689665231]