Dungeon Mastering Your Vue App From Chaos to Order
summary
Shows how large Vue/Nuxt apps get organized: use the C4 model for zoomable diagrams, write Architecture Decision Records (ADR) for why choices happen, and enforce module boundaries with dependency‑cruiser. Demonstrates Nuxt local modules and layer/extension patterns, tradeoffs (SSR vs ops complexity, global state coupling), and a real mini project — a Tresjs 3D RPG experiment with a collision system — plus a staged mini DnD session that illustrates architectural drift and why guard rails matter.
AI-written summary · about
chapters (13)
- 0:00Introduction to chaos in front-end
- 2:08D&D meets software architecture
- 6:46Front-end architect as dungeon master
- 9:14Modeling architecture with C4
- 13:09Team size and architecture choices
- 14:14Next.js modular architecture
- 15:58Next.js layers and extendable architecture
- 17:03Folder structure vs real architecture
- 17:26Architecture guardrails for order
- 18:29Live D&D adventure with Vue and TresJS
- 27:43D&D and front-end architecture parallels
- 28:47Building 3D RPG with TresJS
- 30:17Resources and closing thoughts
related talks
10mLightning talk: Domain Driven Design & Nuxt
38mLarge Scale Nuxt Architecture
22mWays to architecture your vue/nuxt app
26mA modular approach to building large-scale apps with Vue by Kunal Varma
53mClean Architecture Works in the Frontend Too!
37mPatterns for Large Scale Vue.js Applications
48mPatterns for Large Scale Vue JS Applications
30mThe Art of Front-end Architecture