> Markdown version of [/videos/1666-lessons-learned-from-building-a-thriving-vue-js-saas-application?t=93](https://www.wearedevelopers.com/videos/1666-lessons-learned-from-building-a-thriving-vue-js-saas-application?t=93). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Lessons learned from building a thriving Vue.js SaaS application

How do you handle volatile state management and weeks-long user sessions in a massive Vue.js app? Uncover the architectural decisions that power a thriving SaaS messaging platform.

- **Speakers:** [Abdelrahman Awad](https://www.wearedevelopers.com/@abdelrahman-awad)
- **Event:** World Congress 2025
- **Published:** August 20, 2025
- **Duration:** 30:02
- **URL:** https://www.wearedevelopers.com/videos/1666-lessons-learned-from-building-a-thriving-vue-js-saas-application

## Summary

This video details the architectural decisions and lessons learned by a small engineering team building a large-scale, highly interactive Vue.js SaaS application for business messaging. Facing the complexities of managing real-time WebSockets, drag-and-drop bots, and massive state demands, the team adopted Vue.js for its approachability and paired it with GraphQL to enforce end-to-end TypeScript safety. To manage code across multiple deployment targets, they implemented a monorepo structure with strict isolation rules, ensuring that shared logic is centralized but deployment modules never cross-import.

To simplify developer onboarding, component discoverability, and refactoring, the engineers avoided nested directories and explicitly favored a flat component folder structure with strict PascalCase prefix naming. Navigating state management before modern solutions matured, they experienced the drawbacks of raw refs yielding unpredictable mutability and the Provide/Inject pattern causing unclear state ownership. This informed better strategies, such as self-injecting singletons, isolating logic inside composables, and avoiding tree-shaking-killing side effects in barrel files. Furthermore, managing frontend performance meant prioritizing Cumulative Layout Shift (CLS) and Interaction to Next Paint (INP) over volatile metrics like FCP, which ensured strong layout stability when rendering dynamic chat windows.

Finally, handling extremely long-lived user sessions—where browsers might remain open for weeks—presented unique API and asset version skew challenges. The team solved this by establishing consistent Git-hash-based asset naming and passing versioning headers back through the API. This technique automatically gauges the severity of a release, allowing the system to seamlessly prompt or require user client refreshes and ensuring reliable rolling updates for an active global user base.

**Keywords:** vue.js, graphql, typescript, software architecture, monorepo setup, web deployment challenges, cumulative layout shift, interaction to next paint, state management ownership, frontend performance metrics, real-time websockets, vue composables, tree shaking compilation, provide inject pattern, api version skew

## Chapters

1. **Introduction to the speaker and frontend projects** (00:04) — An introduction to the open-source libraries and professional background that shaped these real-world Vue implementations.
1. **Overview of the target real-time application** (01:33) — A breakdown of the application architecture, including its real-time messaging inbox and dynamic drag-and-drop bot builder.
1. **Choosing Vue and GraphQL for strong typings** (03:21) — How deploying Vue and GraphQL simplifies developer onboarding while enforcing strict end-to-end type safety between the client and server.
1. **Monorepo boundaries and flat code component structures** (04:55) — How strictly isolated deployment targets and flat, un-nested component directories remove organizational friction and enable rapid refactoring.
1. **Managing component duplication within massive frontend codebases** (08:31) — Strategies for avoiding duplicate logical clusters by aggressively decoupling ubiquitous system elements and domain-specific user interfaces into isolated libraries.
1. **Structuring and importing predictable, side-effect free composables** (10:22) — Specific rules for organizing Vue logic elements with explicit barrel files and safe function definitions that preserve predictable compiler tree shaking.
1. **Building reusable robust UI-agnostic data fetching composables** (13:52) — Architecting component functions that seamlessly encapsulate API queries, resilient GraphQL subscriptions, and local offline mappings without assuming structural DOM context.
1. **Evaluating state management mutability and dependency injections** (15:52) — An analysis illustrating explicit state ownership properties alongside the implicit developer experience and structural pitfalls inherent in the provide-inject API.
1. **Avoiding state duplication leveraging logical self-inject patterns** (19:57) — Preventing unnecessary network calls by incorporating logical singleton checks bounding explicit variable self-injections while monitoring unintended lifecycle listener traps.
1. **Replacing broad sockets with local-first storage mechanisms** (22:36) — A transitional development roadmap detailing local-first data store architectures and limiting brittle WebSocket dependencies via standard network polling.
1. **Prioritizing cumulative layout shifts and painting measurements** (23:38) — Why focusing on explicit Cumulative Layout Shift and strictly tracking Interaction to Next Paint realistically represent holistic user experience health inside single-page applications.
1. **Mitigating persistent asset version skew over lengthy sessions** (26:29) — Maintaining extreme application uptimes securely logging artifact hashes and distributing granular server-side compatibility headers instructing remote clients to refresh cleanly.

## Related Moments

- [Overcoming challenges of scaling legacy monolithic frontend applications](https://www.wearedevelopers.com/videos/236-microfrontends-at-scale) (from "Microfrontends at Scale")
- [Introduction to the GraphQL, Apollo, and Next.js stack](https://www.wearedevelopers.com/videos/311-graphql-apollo-next-js-a-lovely-trio) (from "GraphQL + Apollo + Next.js: A Lovely Trio")
- [Recapping frontend scaling patterns and distributed UI techniques](https://www.wearedevelopers.com/videos/236-microfrontends-at-scale) (from "Microfrontends at Scale")
- [Optimizing system scalability and real-time push capabilities](https://www.wearedevelopers.com/videos/494-the-rise-of-reactive-microservices) (from "The Rise of Reactive Microservices")
- [Transitioning from graphic design to large scale frontend architecture](https://www.wearedevelopers.com/videos/100153-microfrontends-lessons-learned-from-growing-a-design-system-and-shared-libraries-across-20-teams) (from "Microfrontends: Lessons Learned from Growing a Design System and Shared Libraries Across 20+ teams")
- [Scaling development teams with micro frontend architecture](https://www.wearedevelopers.com/videos/492-stairway-to-heaven-scaling-frontends-the-right-way) (from "Stairway to Heaven - Scaling Frontends the Right Way")

## Related Articles

- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)
- [Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2](https://www.wearedevelopers.com/magazine/662-slopquatting-api-keys-fun-with-fonts-recruiters-vs-ai-and-more-the-best-of-live-2025-part-2)
- [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries)
- [Dev Digest 130 - The Diablo is in the details](https://www.wearedevelopers.com/magazine/470-dev-digest-130-the-diablo-is-in-the-details)

## Related Jobs

- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Agile Full Stack Engineer](https://www.wearedevelopers.com/jobs/48325-agile-full-stack-engineer) at **synava GmbH**
- [Mid/Senior Full-Stack Engineer (Web-first)](https://www.wearedevelopers.com/jobs/ext/1210833-mid-senior-full-stack-engineer-web-first) at **SMG Swiss Marketplace Group**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Senior Software Engineer, Client Apps Platform](https://www.wearedevelopers.com/jobs/ext/1773893-senior-software-engineer-client-apps-platform) at **GitHub**