Design Systems in Vue
summary
RBC Wealth Management runs a single component codebase and drives visual differences by swapping variables per brand so the same Vue components render multiple products. The build uses a webpack plugin and the specific tool named is sass-vars-loader to inject theme values, with a theme folder per brand that supplies colors, radii and which components to include. Builds run per brand for dev and prod, and the resulting components work across apps.
AI-written summary · about
chapters (6)
related talks
28mAgile Design Systems in Vue
49mA Better Design-Dev Handoff Experience: Code-based Design System
22mCode at the Speed of Design in Chakra UI Vue
45mInside Vue Components
35mBuilding effective design systems in Vue, React or whatever
28mFrom Sketch to Code Designing a Component Kit
29mPerformant Components through Customisation
22m'Centralizing the Frontend with Design Systems and Web Components'