Multi-Tenant Frontend Architecture with Nuxt.js

on YouTube ↗22m

" summary

A Nuxt monorepo powers multi-tenant SaaS using pnpm workspaces, Nuxt Layers, and a wrapped shadcn + CVA UI so tenants inherit base code but can override CVA functions; tenant-specific CVA configs merge with tailwind-merge so the tenant’s classes win. Deployments run from CI triggered by Git tag deployments to Firebase. The repo currently serves six brands and is designed to scale to ~30; a monorepo template lives on GitHub. Modularity (removing base modules) remains unsolved.

AI-written summary · about

" chapters (9)

1. 0:00Introduction and overview
2. 3:02What is multi-tenancy
3. 6:13Used tools and stack
4. 8:40Architecture diagram explained
5. 12:22Onion-layered architecture
6. 13:03Theming with CVA and Tailwind
7. 16:55Deployment strategy with Git tags
8. 19:29Future improvements and challenges
9. 21:12Summary and Q&A

" related talks

• 35mA multisite Vue3 application for a multitenant enviromnent: a survival guideMarco Zuccaroli · vueday 2023
• 37mBuilding Scalable Multi-Tenant Frontend Architecture for a B2B E-Commerce PlatformGuilherme Dalla Rosa · XtremeJS 2023
• 24mMulti-variant apps with Nuxt 3Alexander Lichter · Nuxt Nation 2022
• 22mDeep dive into Nuxt.jsPooya Parsa · Vue.js Amsterdam 2020
• 26mLayers Unwrapped: A Fresh Approach to Nuxt App ArchitectureKrutie Patel · Nuxt Nation 2023
• 21mHow to enable large scale collaboration between disciplines using NuxtYassine El Ouazzani · JSWorld Conference 2022
• 38mLarge Scale Nuxt ArchitectureFotis Adamakis · vueday 2022
• 43mScalable Multi-Tenant Frontend for an E-Commerce PlatformGuilherme Dalla Rosa · Conf42 JavaScript 2023