A multisite Vue3 application for a multitenant enviromnent: a survival guide
summary
Single codebase handles multiple tenants using Vue3 Vite and Pinia with a dedicated tenant service that supplies tenant codes via env vars and an Axios interceptor that decorates every API call. Translations live as JSON with a fallback merge, styles load via glob imports, and image bloat from per-tenant logos is fixed by an SVG loader plus a Vite build step that strips unused assets. End result is deployable per-tenant builds, tested with Cypress against the final artifact and used in production.
AI-written summary · about
chapters (24)
- 0:00Introduction
- 1:06Multitenancy in frontend
- 2:10Codebase chaos with forks
- 3:55Breaking point and solution
- 4:40Survival guide principles
- 5:45Tenant service hero
- 7:10API calls with tenant isolation
- 8:42Environment variables tricks
- 10:50Axios interceptors deep dive
- 12:36Assets across tenants
- 14:00Translations with fallback
- 16:52Tenant-specific translations
- 18:22Styling with CSS
- 19:06CSS loading fixes
- 20:58Tenant images efficiently
- 23:27Vite plugins for output
- 24:56SVG loader for assets
- 26:05Async asset loading
- 26:52Cleaning build artifacts
- 27:36Managing favicons
- 29:01Conclusion
- 29:44Q&A: Testing multitenant
- 30:47Q&A: Tenant features
- 31:49Q&A: Dynamic modules
related talks
22mMulti-Tenant Frontend Architecture with Nuxt.js
48mPatterns for Large Scale Vue JS Applications
43mScalable Multi-Tenant Frontend for an E-Commerce Platform
37mBuilding Scalable Multi-Tenant Frontend Architecture for a B2B E-Commerce Platform
38mVue 3 Exclusive Interview Vue3 and Beyond
44mVue 3: A Maturation of the Platform
36mEfficient multisite setup with Nuxt Layers
37mPatterns for Large Scale Vue.js Applications