[{"data":1,"prerenderedAt":321},["ShallowReactive",2],{"blog-/blog/building-with-nuxt-4":3},{"id":4,"title":5,"body":6,"description":307,"extension":308,"meta":309,"navigation":316,"path":317,"seo":318,"stem":319,"__hash__":320},"content/blog/building-with-nuxt-4.md","Building Modern Websites with Nuxt 4",{"type":7,"value":8,"toc":300},"minimark",[9,13,17,22,30,40,44,47,81,181,185,188,199,203,210,289,293,296],[10,11,5],"h1",{"id":12},"building-modern-websites-with-nuxt-4",[14,15,16],"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.",[18,19,21],"h2",{"id":20},"the-power-of-file-based-routing","The Power of File-Based Routing",[14,23,24,25,29],{},"One of Nuxt's strongest features is its file-based routing system. Simply create a file in the ",[26,27,28],"code",{},"pages"," directory, and you've got a route.",[31,32,37],"pre",{"className":33,"code":35,"language":36},[34],"language-text","pages/\n├── index.vue        → /\n├── about.vue        → /about\n└── blog/\n    ├── index.vue    → /blog\n    └── [slug].vue   → /blog/:slug\n","text",[26,38,35],{"__ignoreMap":39},"",[18,41,43],{"id":42},"auto-imports","Auto-Imports",[14,45,46],{},"Gone are the days of manually importing every component and composable. Nuxt automatically imports:",[48,49,50,58,64,70],"ul",{},[51,52,53,54,57],"li",{},"Components from the ",[26,55,56],{},"components/"," directory",[51,59,60,61,57],{},"Composables from the ",[26,62,63],{},"composables/",[51,65,66,67,57],{},"Utils from the ",[26,68,69],{},"utils/",[51,71,72,73,76,77,80],{},"Vue's reactivity APIs (",[26,74,75],{},"ref",", ",[26,78,79],{},"computed",", etc.)",[31,82,86],{"className":83,"code":84,"language":85,"meta":39,"style":39},"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",[26,87,88,108,115,141,171],{"__ignoreMap":39},[89,90,93,97,101,105],"span",{"class":91,"line":92},"line",1,[89,94,96],{"class":95},"sVt8B","\u003C",[89,98,100],{"class":99},"s9eBZ","script",[89,102,104],{"class":103},"sScJk"," setup",[89,106,107],{"class":95},">\n",[89,109,111],{"class":91,"line":110},2,[89,112,114],{"class":113},"sJ8bj","// No imports needed!\n",[89,116,118,122,126,129,132,135,138],{"class":91,"line":117},3,[89,119,121],{"class":120},"szBVR","const",[89,123,125],{"class":124},"sj4cs"," count",[89,127,128],{"class":120}," =",[89,130,131],{"class":103}," ref",[89,133,134],{"class":95},"(",[89,136,137],{"class":124},"0",[89,139,140],{"class":95},")\n",[89,142,144,146,149,151,154,157,160,163,166,169],{"class":91,"line":143},4,[89,145,121],{"class":120},[89,147,148],{"class":124}," doubled",[89,150,128],{"class":120},[89,152,153],{"class":103}," computed",[89,155,156],{"class":95},"(() ",[89,158,159],{"class":120},"=>",[89,161,162],{"class":95}," count.value ",[89,164,165],{"class":120},"*",[89,167,168],{"class":124}," 2",[89,170,140],{"class":95},[89,172,174,177,179],{"class":91,"line":173},5,[89,175,176],{"class":95},"\u003C/",[89,178,100],{"class":99},[89,180,107],{"class":95},[18,182,184],{"id":183},"server-side-rendering-by-default","Server-Side Rendering by Default",[14,186,187],{},"Nuxt 4 provides SSR out of the box, which means:",[48,189,190,193,196],{},[51,191,192],{},"Better SEO with fully rendered HTML",[51,194,195],{},"Faster initial page loads",[51,197,198],{},"Improved performance on slower devices",[18,200,202],{"id":201},"hybrid-rendering","Hybrid Rendering",[14,204,205,206,209],{},"With ",[26,207,208],{},"routeRules",", you can configure different rendering strategies per route:",[31,211,215],{"className":212,"code":213,"language":214,"meta":39,"style":39},"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",[26,216,217,231,236,251,263,277,283],{"__ignoreMap":39},[89,218,219,222,225,228],{"class":91,"line":92},[89,220,221],{"class":120},"export",[89,223,224],{"class":120}," default",[89,226,227],{"class":103}," defineNuxtConfig",[89,229,230],{"class":95},"({\n",[89,232,233],{"class":91,"line":110},[89,234,235],{"class":95},"  routeRules: {\n",[89,237,238,242,245,248],{"class":91,"line":117},[89,239,241],{"class":240},"sZZnC","    '/'",[89,243,244],{"class":95},": { prerender: ",[89,246,247],{"class":124},"true",[89,249,250],{"class":95}," },\n",[89,252,253,256,259,261],{"class":91,"line":143},[89,254,255],{"class":240},"    '/api/**'",[89,257,258],{"class":95},": { cors: ",[89,260,247],{"class":124},[89,262,250],{"class":95},[89,264,265,268,271,274],{"class":91,"line":173},[89,266,267],{"class":240},"    '/admin/**'",[89,269,270],{"class":95},": { ssr: ",[89,272,273],{"class":124},"false",[89,275,276],{"class":95}," }\n",[89,278,280],{"class":91,"line":279},6,[89,281,282],{"class":95},"  }\n",[89,284,286],{"class":91,"line":285},7,[89,287,288],{"class":95},"})\n",[18,290,292],{"id":291},"conclusion","Conclusion",[14,294,295],{},"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.",[297,298,299],"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":39,"searchDepth":110,"depth":110,"links":301},[302,303,304,305,306],{"id":20,"depth":110,"text":21},{"id":42,"depth":110,"text":43},{"id":183,"depth":110,"text":184},{"id":201,"depth":110,"text":202},{"id":291,"depth":110,"text":292},"A look at what makes Nuxt 4 great for building performant, SEO-friendly web applications.","md",{"date":310,"tags":311,"icon":315,"readingTime":173},"2024-02-03",[312,313,314],"Nuxt","Vue.js","Web Development","💚",true,"/blog/building-with-nuxt-4",{"title":5,"description":307},"blog/building-with-nuxt-4","8HfDue-ufbe8Zeg5Yk0ZuE6FxgaIst3F_FkDGv9ZqRk",1778689665362]