[{"data":1,"prerenderedAt":501},["ShallowReactive",2],{"navigation":3,"/blog/scaling-new-heights-building-scalable-vue-and-nuxt-applications":30,"/blog/scaling-new-heights-building-scalable-vue-and-nuxt-applications-surround":496},[4],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Blog","/blog","blog",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"10 Coding Practices I Follow on Every Project (So You Don’t Have To Regret Hiring Me)","/blog/10-coding-practices-i-follow-every-project","blog/10-coding-practices-i-follow-every-project",{"title":14,"path":15,"stem":16},"AI vs Human Developers in 2025: A Collaboration Playbook","/blog/ai-vs-human-developers-collaboration-playbook","blog/ai-vs-human-developers-collaboration-playbook",{"title":18,"path":19,"stem":20},"Frontend vs Backend: The Endless Battle for Supremacy (And Why You Shouldn't Care)","/blog/frontend-vs-backend-the-endless-battle-for-supremacy-and-why-you-shouldn-t-care","blog/frontend-vs-backend-the-endless-battle-for-supremacy-and-why-you-shouldn-t-care",{"title":22,"path":23,"stem":24},"Scaling New Heights: Building Scalable Vue and Nuxt Applications","/blog/scaling-new-heights-building-scalable-vue-and-nuxt-applications","blog/scaling-new-heights-building-scalable-vue-and-nuxt-applications",{"title":26,"path":27,"stem":28},"What Hiring Managers Really Look for in Developer Portfolios in 2025","/blog/what-hiring-managers-want-in-developer-portfolios-2025","blog/what-hiring-managers-want-in-developer-portfolios-2025",false,{"id":31,"title":22,"author":32,"body":38,"canonical":486,"coverAlt":487,"date":488,"description":489,"excerpt":486,"extension":490,"featured":29,"image":491,"meta":492,"minRead":199,"navigation":158,"path":23,"seo":493,"stem":24,"tags":494,"__hash__":495},"blog/blog/scaling-new-heights-building-scalable-vue-and-nuxt-applications.md",{"name":33,"username":34,"to":35,"avatar":36},"Kadiri Success","codebyquan","https://twitter.com/codebyquan",{"src":37,"alt":33},"/avatar/kadiri.jpg",{"type":39,"value":40,"toc":476},"minimark",[41,54,59,65,120,131,135,142,243,264,268,275,297,301,308,404,411,415,418,423,426,457,461,472],[42,43,44,45,49,50,53],"p",{},"As a developer, there's nothing quite like the feeling of building a scalable application that can handle a large volume of traffic and user engagement. In this post, we'll focus on ",[46,47,48],"strong",{},"Vue"," and ",[46,51,52],{},"Nuxt",", two popular frameworks for building web applications. We'll explore the best practices and techniques for building scalable Vue and Nuxt applications, from project structure to performance optimization.",[55,56,58],"h2",{"id":57},"project-structure","Project Structure",[42,60,61,62,64],{},"When it comes to building scalable applications, a well-organized project structure is essential. This is where ",[46,63,52],{}," comes in, providing a robust framework for building server-side rendered (SSR) and static site generated (SSG) applications. Here's an example of a basic Nuxt project structure:",[66,67,72],"pre",{"className":68,"code":69,"language":70,"meta":71,"style":71},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","components/\npages/\nplugins/\nstore/\nutils/\nnuxt.config.js\npackage.json\n","bash","",[73,74,75,84,90,96,102,108,114],"code",{"__ignoreMap":71},[76,77,80],"span",{"class":78,"line":79},"line",1,[76,81,83],{"class":82},"sBMFI","components/\n",[76,85,87],{"class":78,"line":86},2,[76,88,89],{"class":82},"pages/\n",[76,91,93],{"class":78,"line":92},3,[76,94,95],{"class":82},"plugins/\n",[76,97,99],{"class":78,"line":98},4,[76,100,101],{"class":82},"store/\n",[76,103,105],{"class":78,"line":104},5,[76,106,107],{"class":82},"utils/\n",[76,109,111],{"class":78,"line":110},6,[76,112,113],{"class":82},"nuxt.config.js\n",[76,115,117],{"class":78,"line":116},7,[76,118,119],{"class":82},"package.json\n",[42,121,122,123,126,127,130],{},"In this structure, we have separate folders for components, pages, plugins, store, and utilities. The ",[73,124,125],{},"nuxt.config.js"," file is where we configure our Nuxt application, and the ",[73,128,129],{},"package.json"," file is where we manage our dependencies.",[55,132,134],{"id":133},"state-management","State Management",[42,136,137,138,141],{},"State management is a critical aspect of building scalable applications. In Vue, we can use the ",[46,139,140],{},"Vuex"," library to manage state across our application. Here's an example of a basic Vuex store:",[66,143,147],{"className":144,"code":145,"language":146,"meta":71,"style":71},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { createStore } from 'vuex'\n\nexport default createStore({\n  state: {\n    counter: 0\n  },\n  mutations: {\n    increment(state) {\n      state.counter++\n    }\n  },\n  actions: {\n    increment({ commit }) {\n      commit('increment')\n    }\n  }\n})\n","javascript",[73,148,149,154,160,165,170,175,180,185,191,197,203,208,214,220,226,231,237],{"__ignoreMap":71},[76,150,151],{"class":78,"line":79},[76,152,153],{},"import { createStore } from 'vuex'\n",[76,155,156],{"class":78,"line":86},[76,157,159],{"emptyLinePlaceholder":158},true,"\n",[76,161,162],{"class":78,"line":92},[76,163,164],{},"export default createStore({\n",[76,166,167],{"class":78,"line":98},[76,168,169],{},"  state: {\n",[76,171,172],{"class":78,"line":104},[76,173,174],{},"    counter: 0\n",[76,176,177],{"class":78,"line":110},[76,178,179],{},"  },\n",[76,181,182],{"class":78,"line":116},[76,183,184],{},"  mutations: {\n",[76,186,188],{"class":78,"line":187},8,[76,189,190],{},"    increment(state) {\n",[76,192,194],{"class":78,"line":193},9,[76,195,196],{},"      state.counter++\n",[76,198,200],{"class":78,"line":199},10,[76,201,202],{},"    }\n",[76,204,206],{"class":78,"line":205},11,[76,207,179],{},[76,209,211],{"class":78,"line":210},12,[76,212,213],{},"  actions: {\n",[76,215,217],{"class":78,"line":216},13,[76,218,219],{},"    increment({ commit }) {\n",[76,221,223],{"class":78,"line":222},14,[76,224,225],{},"      commit('increment')\n",[76,227,229],{"class":78,"line":228},15,[76,230,202],{},[76,232,234],{"class":78,"line":233},16,[76,235,236],{},"  }\n",[76,238,240],{"class":78,"line":239},17,[76,241,242],{},"})\n",[42,244,245,246,249,250,253,254,256,257,49,260,263],{},"In this example, we define a ",[73,247,248],{},"counter"," state property, a ",[73,251,252],{},"increment"," mutation, and an ",[73,255,252],{}," action. We can then use the ",[73,258,259],{},"mapState",[73,261,262],{},"mapActions"," helpers to access the state and dispatch actions in our components.",[55,265,267],{"id":266},"performance-optimization","Performance Optimization",[42,269,270,271,274],{},"Performance optimization is crucial for building scalable applications. In Vue, we can use the ",[46,272,273],{},"Vue Devtools"," to identify performance bottlenecks and optimize our code. Here are some tips for optimizing Vue applications:",[276,277,278,285,291],"ul",{},[279,280,281,284],"li",{},[46,282,283],{},"Use lazy loading",": Lazy loading allows us to load components and modules only when they're needed, reducing the initial payload and improving performance.",[279,286,287,290],{},[46,288,289],{},"Use caching",": Caching allows us to store frequently accessed data in memory, reducing the number of requests to the server and improving performance.",[279,292,293,296],{},[46,294,295],{},"Optimize images",": Optimizing images can significantly reduce the size of our application and improve performance.",[55,298,300],{"id":299},"security","Security",[42,302,303,304,307],{},"Security is a top priority when building scalable applications. In Vue, we can use the ",[46,305,306],{},"Vue Helmet"," library to manage the document head and improve security. Here's an example of how to use Vue Helmet:",[66,309,311],{"className":144,"code":310,"language":146,"meta":71,"style":71},"import { VueHelmet } from 'vue-helmet'\n\nexport default {\n  components: { VueHelmet },\n  data() {\n    return {\n      title: 'My Application'\n    }\n  },\n  head() {\n    return {\n      title: this.title,\n      meta: [\n        { charset: 'utf-8' },\n        { name: 'viewport', content: 'width=device-width, initial-scale=1' }\n      ]\n    }\n  }\n}\n",[73,312,313,318,322,327,332,337,342,347,351,355,360,364,369,374,379,384,389,393,398],{"__ignoreMap":71},[76,314,315],{"class":78,"line":79},[76,316,317],{},"import { VueHelmet } from 'vue-helmet'\n",[76,319,320],{"class":78,"line":86},[76,321,159],{"emptyLinePlaceholder":158},[76,323,324],{"class":78,"line":92},[76,325,326],{},"export default {\n",[76,328,329],{"class":78,"line":98},[76,330,331],{},"  components: { VueHelmet },\n",[76,333,334],{"class":78,"line":104},[76,335,336],{},"  data() {\n",[76,338,339],{"class":78,"line":110},[76,340,341],{},"    return {\n",[76,343,344],{"class":78,"line":116},[76,345,346],{},"      title: 'My Application'\n",[76,348,349],{"class":78,"line":187},[76,350,202],{},[76,352,353],{"class":78,"line":193},[76,354,179],{},[76,356,357],{"class":78,"line":199},[76,358,359],{},"  head() {\n",[76,361,362],{"class":78,"line":205},[76,363,341],{},[76,365,366],{"class":78,"line":210},[76,367,368],{},"      title: this.title,\n",[76,370,371],{"class":78,"line":216},[76,372,373],{},"      meta: [\n",[76,375,376],{"class":78,"line":222},[76,377,378],{},"        { charset: 'utf-8' },\n",[76,380,381],{"class":78,"line":228},[76,382,383],{},"        { name: 'viewport', content: 'width=device-width, initial-scale=1' }\n",[76,385,386],{"class":78,"line":233},[76,387,388],{},"      ]\n",[76,390,391],{"class":78,"line":239},[76,392,202],{},[76,394,396],{"class":78,"line":395},18,[76,397,236],{},[76,399,401],{"class":78,"line":400},19,[76,402,403],{},"}\n",[42,405,406,407,410],{},"In this example, we use the ",[73,408,409],{},"VueHelmet"," component to manage the document head and set the title and meta tags.",[55,412,414],{"id":413},"conclusion","Conclusion",[42,416,417],{},"Building scalable Vue and Nuxt applications requires a combination of best practices, techniques, and tools. By following the guidelines outlined in this post, you can build high-performance, secure, and scalable applications that meet the needs of your users. Remember to always prioritize performance optimization, state management, and security when building your applications. Happy coding!",[419,420,422],"h3",{"id":421},"additional-resources","Additional Resources",[42,424,425],{},"For more information on building scalable Vue and Nuxt applications, check out the following resources:",[276,427,428,437,444,451],{},[279,429,430],{},[431,432,436],"a",{"href":433,"rel":434},"https://vuejs.org/v2/guide/",[435],"nofollow","Vue Documentation",[279,438,439],{},[431,440,443],{"href":441,"rel":442},"https://nuxtjs.org/docs/2.x/get-started/first-steps",[435],"Nuxt Documentation",[279,445,446],{},[431,447,450],{"href":448,"rel":449},"https://vuex.vuejs.org/guide/",[435],"Vuex Documentation",[279,452,453],{},[431,454,273],{"href":455,"rel":456},"https://chrome.google.com/webstore/detail/vue-devtools/nhdogjmejiglipccpnnnnahpafanjcd",[435],[419,458,460],{"id":459},"join-the-conversation","Join the Conversation",[42,462,463,464,467,468,471],{},"If you have any questions or comments about building scalable Vue and Nuxt applications, please join the conversation on Twitter using the hashtag ",[46,465,466],{},"#VueAndNuxt",". You can also follow me on Twitter at ",[46,469,470],{},"@codebyquan"," for more updates and insights on web development.",[473,474,475],"style",{},"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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":71,"searchDepth":86,"depth":86,"links":477},[478,479,480,481,482],{"id":57,"depth":86,"text":58},{"id":133,"depth":86,"text":134},{"id":266,"depth":86,"text":267},{"id":299,"depth":86,"text":300},{"id":413,"depth":86,"text":414,"children":483},[484,485],{"id":421,"depth":92,"text":422},{"id":459,"depth":92,"text":460},null,"Coding setup","2026-03-13T23:20:39.502Z","In this post, we'll delve into the world of Vue and Nuxt, exploring the best practices and techniques for building scalable applications. From project structure to performance optimization, we'll cover it all. Whether you're a seasoned developer or just starting out, this guide will provide you with the knowledge and expertise to take your Vue and Nuxt applications to the next level.","md","https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=2070&auto=format&fit=crop",{},{"title":22,"description":489},"Web-Development, Frontend, Vue, Nuxt","BlFWkMLSd-aHTx2jfxkrlXHDJ0RwPUXcSbYEnDaIMJw",[497,499],{"title":18,"path":19,"stem":20,"description":498,"children":-1},"The age-old debate between frontend and backend developers has been raging for years, with each side convinced of their own superiority. But what's the real difference, and why should you care? In this post, we'll dive into the world of web development, exploring the highs and lows of both frontend and backend development, and why it's time to put the rivalry to rest. Whether you're a seasoned developer or just starting out, this post is for you - so grab a snack, get comfortable, and let's dive in.",{"title":26,"path":27,"stem":28,"description":500,"children":-1},"Beyond Dribbble shots: how I design portfolio projects so hiring managers see signal, not noise.",1773445098412]