Lessons Learned from Crafting a Thriving Vue.js SaaS Behemoth
summary
A Vue 3 SaaS stack forces the composition API at compile time and runs with 700 components organized by descriptive names so most components are five liners; real time uses GraphQL-like subscriptions to keep message streams in sync across three representations (native, iframe, third-party Hoplot). Global state avoids classic stores by using provide/inject and self-injecting composables to prevent double initialization. Lazy chunking cuts initial bundle but adds ~200ms execution delay. Testing relies on MSW for reliable contract-style tests of primitive UI components.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 5:37Vue 3 and Type Safety
- 8:28Component Structure Insights
- 10:16Composable Functions Design
- 13:49State Management Challenges
- 17:43Provide/Inject Best Practices
- 20:13Lazy Loading Optimization
- 21:39Performance Goals and Trade-offs
- 23:02Testing Strategies
- 24:06Service Worker Integration
related talks
55mLessons Learned from Crafting a Thriving vue.js SAAS App
23mFull Stack Vue in the Era of Serverless Computing
21mModern State Management with Vue 3
32mScalable Front End Architecture with the Composition API and Composable Functions
38mThe Vue from up Here Scaling with a Progressive JS Framework
36mThe biggest eCommerce Vue project with Composition API
49mVue and Vuex: Structure your app with centralized state management
24mState of Components