[{"data":1,"prerenderedAt":255},["ShallowReactive",2],{"navigation":3,"/blog/vuejs-introducing-dynamic-layouts-using-the-atomic-design-principles":142,"/blog/vuejs-introducing-dynamic-layouts-using-the-atomic-design-principles-surround":251},[4],{"title":5,"path":6,"stem":7,"children":8,"page":141},"Blog","/blog","blog",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137],{"title":10,"path":11,"stem":12},"VueJS Introducing Dynamic Layouts using the Atomic Design Principles","/blog/vuejs-introducing-dynamic-layouts-using-the-atomic-design-principles","blog/001.vuejs-introducing-dynamic-layouts-using-the-atomic-design-principles",{"title":14,"path":15,"stem":16},"Understanding JavaScript and Its Quirks","/blog/understanding-javascript-and-its-quirks","blog/002.understanding-javascript-and-its-quirks",{"title":18,"path":19,"stem":20},"Introducing Vue’s latest experimental Vapor Mode","/blog/introducing-vues-latest-experimental-vapor-mode","blog/003.introducing-vues-latest-experimental-vapor-mode",{"title":22,"path":23,"stem":24},"ECMAScript 2024 Nears Finalization","/blog/ecmascript-2024-nears-finalization","blog/004.ecmascript-2024-nears-finalization",{"title":26,"path":27,"stem":28},"UI Libraries for VueJS: Vuetify, Tailwind, and PrimeVue","/blog/ui-libraries-for-vuejs-vuetify-tailwind-and-primevue","blog/005.ui-libraries-for-vuejs-vuetify-tailwind-and-primevue",{"title":30,"path":31,"stem":32},"Micro Frontend Architecture","/blog/micro-frontend-architecture","blog/006.micro-frontend-architecture",{"title":34,"path":35,"stem":36},"Pre-rendering and Hydration in Vue.js","/blog/pre-rendering-and-hydration-in-vuejs","blog/007.pre-rendering-and-hydration-in-vuejs",{"title":38,"path":39,"stem":40},"Satori by Vercel — Dynamic Image Generation in JavaScript","/blog/satori-by-vercel-dynamic-image-generation-in-javascript","blog/008.satori-by-vercel-dynamic-image-generation-in-javascript",{"title":42,"path":43,"stem":44},"Vue.js and Progressive Web Apps (PWA) – Enhancing Web Experiences","/blog/vuejs-and-progressive-web-apps-pwa-enhancing-web-experiences","blog/009.vuejs-and-progressive-web-apps-pwa-enhancing-web-experiences",{"title":46,"path":47,"stem":48},"Moving from a Traditional Node.js CRUD API to Serverless Architecture—A Deep Dive","/blog/moving-from-a-traditional-nodejs-crud-api-to-serverless-architecturea-deep-dive","blog/010.moving-from-a-traditional-nodejs-crud-api-to-serverless-architecturea-deep-dive",{"title":50,"path":51,"stem":52},"Nuxt 3 and Serverless Edge Functions—Unlocking Performance and Scalability","/blog/nuxt-3-and-serverless-edge-functionsunlocking-performance-and-scalability","blog/011.nuxt-3-and-serverless-edge-functionsunlocking-performance-and-scalability",{"title":54,"path":55,"stem":56},"A Tribute to Asa Bain: Thank You for Everything","/blog/a-tribute-to-asa-bain-thank-you-for-everything","blog/012.a-tribute-to-asa-bain-thank-you-for-everything",{"title":58,"path":59,"stem":60},"Migrating JavaScript to TypeScript in ASP.NET MVC Projects","/blog/migrating-javascript-to-typescript-in-aspnet-mvc-projects","blog/013.migrating-javascript-to-typescript-in-aspnet-mvc-projects",{"title":62,"path":63,"stem":64},"Modernizing Classic ASP.NET MVC with Vue.js","/blog/modernizing-classic-aspnet-mvc-with-vuejs","blog/014.modernizing-classic-aspnet-mvc-with-vuejs",{"title":66,"path":67,"stem":68},"Which UI JavaScript Framework Should You Use?","/blog/which-ui-javascript-framework-should-you-use","blog/015.which-ui-javascript-framework-should-you-use",{"title":70,"path":71,"stem":72},"Vue + AI Integration Workflows: Enhancing Developer Productivity","/blog/vue-ai-integration-workflows-enhancing-developer-productivity","blog/016.vue-ai-integration-workflows-enhancing-developer-productivity",{"title":74,"path":75,"stem":76},"OpenAPI Standards & Scalar Integration for Node.js Apps","/blog/openapi-standards-scalar-integration-for-nodejs-apps","blog/017.openapi-standards-scalar-integration-for-nodejs-apps",{"title":78,"path":79,"stem":80},"Nuxt 3.17 — Data Fetching Improvements","/blog/nuxt-317-data-fetching-improvements","blog/019.nuxt-317-data-fetching-improvements",{"title":82,"path":83,"stem":84},"Subdomain-Based Multi-Tenancy in Nuxt","/blog/subdomain-based-multi-tenancy-in-nuxt","blog/020.subdomain-based-multi-tenancy-in-nuxt",{"title":86,"path":87,"stem":88},"Type-Safe Backends with TypeScript: tRPC, Zod, and Drizzle ORM","/blog/type-safe-backends-with-typescript-trpc-zod-and-drizzle-orm","blog/021.type-safe-backends-with-typescript-trpc-zod-and-drizzle-orm",{"title":90,"path":91,"stem":92},"Unit Testing Vue Applications with Vitest and Agentic AI","/blog/unit-testing-vue-applications-with-vitest-and-agentic-ai","blog/022.unit-testing-vue-applications-with-vitest-and-agentic-ai",{"title":94,"path":95,"stem":96},"Hidden Features & Lesser-Known TypeScript Gems","/blog/hidden-features-lesser-known-typescript-gems","blog/023.hidden-features-lesser-known-typescript-gems",{"title":98,"path":99,"stem":100},"Nuxt/Vercel Acquisition and Its Impact on NuxtHub Users","/blog/nuxtvercel-acquisition-and-its-impact-on-nuxthub-users","blog/024.nuxtvercel-acquisition-and-its-impact-on-nuxthub-users",{"title":102,"path":103,"stem":104},"State of Vue & Nuxt Ecosystem 2025","/blog/state-of-vue-nuxt-ecosystem-2025","blog/025.state-of-vue-nuxt-ecosystem-2025",{"title":106,"path":107,"stem":108},"Feature Adoption in TypeScript Over Time","/blog/feature-adoption-in-typescript-over-time","blog/026.feature-adoption-in-typescript-over-time",{"title":110,"path":111,"stem":112},"Migrating From WordPress to Nuxt Content & Using Nuxt Studio","/blog/migrating-from-wordpress-to-nuxt-content-using-nuxt-studio","blog/027.migrating-from-wordpress-to-nuxt-content-using-nuxt-studio",{"title":114,"path":115,"stem":116},"Strategic Topic: The “Rust-ification” of Tooling (Biome & Rolldown)","/blog/strategic-topic-the-rust-ification-of-tooling-biome-rolldown","blog/028.strategic-topic-the-rust-ification-of-tooling-biome-rolldown",{"title":118,"path":119,"stem":120},"Nuxt 4 and the Evolving Full-Stack Framework Landscape","/blog/nuxt-4-and-the-evolving-full-stack-framework-landscape","blog/029.nuxt-4-and-the-evolving-full-stack-framework-landscape",{"title":122,"path":123,"stem":124},"Bun as a JavaScript Runtime: Evaluating Readiness Beyond Node.js","/blog/bun-as-a-javascript-runtime-evaluating-readiness-beyond-nodejs","blog/030.bun-as-a-javascript-runtime-evaluating-readiness-beyond-nodejs",{"title":126,"path":127,"stem":128},"Top 10 Nuxt Modules That Supercharge Your App From Day One Introduction","/blog/top-10-nuxt-modules-that-supercharge-your-app-from-day-one-introduction","blog/031.top-10-nuxt-modules-that-supercharge-your-app-from-day-one-introduction",{"title":130,"path":131,"stem":132},"Strategic Topic: Vite+, VoidZero, and the Future of Frontend Tooling","/blog/strategic-topic-vite-voidzero-and-the-future-of-frontend-tooling","blog/032.strategic-topic-vite-voidzero-and-the-future-of-frontend-tooling",{"title":134,"path":135,"stem":136},"The Future of Time in JavaScript: Transitioning to the Native Temporal API","/blog/the-future-of-time-in-javascript-transitioning-to-the-native-temporal-api","blog/033.the-future-of-time-in-javascript-transitioning-to-the-native-temporal-api",{"title":138,"path":139,"stem":140},"Understanding Hydration Issues in Nuxt and How Nuxt Hints Helps","/blog/understanding-hydration-issues-in-nuxt-and-how-nuxt-hints-helps","blog/034.understanding-hydration-issues-in-nuxt-and-how-nuxt-hints-helps",false,{"id":143,"title":10,"author":144,"body":148,"date":244,"description":179,"extension":245,"image":246,"meta":247,"minRead":240,"navigation":248,"path":11,"seo":249,"stem":12,"__hash__":250},"blog/blog/001.vuejs-introducing-dynamic-layouts-using-the-atomic-design-principles.md",{"name":145,"avatar":146},"Sean Erick C. Ramones",{"src":147,"alt":145},"/avatars/profile-image-1.png",{"type":149,"value":150,"toc":238},"minimark",[151,161,177,180,186,198,203,206,211,214,219,235],[152,153,155,156,160],"h1",{"id":154},"vueoctober-2024-vuejs-introducing-dynamic-layouts-using-the-atomic-design-principles","[Vue]",[157,158,159],"span",{},"October 2024"," - VueJS Introducing Dynamic Layouts using the Atomic Design Principles",[162,163,164,165,171,172,176],"p",{},"Sources: [",[166,167,168],"a",{"href":168,"rel":169},"https://atomicdesign.bradfrost.com/chapter-2/",[170],"nofollow",", ",[166,173,174],{"href":174,"rel":175},"https://www.vuemastery.com/blog/dynamic-layouts-with-vue-jsx/#introducing-dynamic-layouts",[170],"]",[162,178,179],{},"For this month, Niclas - a frontend developer from the Sysarb SWE team has introduced a new architecture in the project client that can help scale and maintain the project better in the long-run.",[181,182,183],"blockquote",{},[162,184,185],{},"The Problem: Fast-paced implementations but frequent changes in the UI.",[162,187,188,189,193,194,197],{},"Creating UIs might be easy, but the hard part is maintaining them. The problem I frequently address when working on tasks during a sprint is mostly when there are scope changes - usually when I am currently working on. While we had moved to use a more centralized way of fetching and managing data thru the use of ",[190,191,192],"code",{},"vue-composables","  and ",[190,195,196],{},"pinia-stores"," , it doesn’t really help making the new changes fast since most of it involves the UI.",[181,199,200],{},[162,201,202],{},"The Solution? Using Dynamic Template Layouts",[162,204,205],{},"Introducing the new atomic design principles, we can make views by abstracting them thru templates. This way we separate component-views to sections of the templates, and that way we also segregate certain data and reusability of certain parts. This helps us especially when there are new layout changes - if the changes are top-level layouts, we can easily move/create new templates and punch in the existing view-components.",[181,207,208],{},[162,209,210],{},"The Down-sides of the approach",[162,212,213],{},"It involves another layer of abstraction in the view. Meaning you can’t create pages without declaring a template for it first. While this is helpful if you have different views with the same layout template, it is kind of redundant to add it if you only want a single-view template. But the thing here is that, we are prepared to move things around should there be new scope changes. And that saves us time 😄.",[215,216,218],"h3",{"id":217},"take-away","Take-away",[162,220,221,222,226,227,230,231,234],{},"Using ",[223,224,225],"strong",{},"Atomic Design Principles"," together with ",[190,228,229],{},"Dynamic Layout Templates"," in this way allows you to create highly reusable and maintainable components and page-views, which are essential for scalable design systems in ",[190,232,233],{},"Vue.js"," applications.",[162,236,237],{},"We are currently using this approach, and is somewhat of an experimental period. So far, it has worked, together with the ongoing migrations from foundation-css library to the new Bootstrap v5 library. I also think this will continue to help the client when the Sysarb UI Library is published by Niclas.",{"title":239,"searchDepth":240,"depth":240,"links":241},"",2,[242],{"id":217,"depth":243,"text":218},3,"2024-10-01T00:00:00.000Z","md","https://images.pexels.com/photos/256502/pexels-photo-256502.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",{},true,{"title":10,"description":179},"54XhtZZLFxh-zfdNCy_avzivTbcnZj8767qpQCqzI5Q",[252,253],null,{"title":14,"path":15,"stem":16,"description":254,"children":-1},"*By Sean Erick C. Ramones, Vue SME | JavaScript/TypeScript SME*",1773209887749]