Component Design Patterns
summary
Shows concrete refactors for conditional rendering: extract each v-if branch into separate components like ArticleCollapsed and ArticleExpanded, or push the v-for and the branch logic down into a single child component (v-if pushed to child). Demonstrates using NuxtLink and class toggles, then finds a real bug — a negated v-show left behind — proving the combined component becomes harder to reason about. Argues that removing duplicated characters can hide distinct intent, so sometimes separate simpler components win.
AI-written summary · about
chapters (7)
- 0:00Intro
- 1:00When do we create new components?
- 1:22How do we do it well?
- 2:19Conditionals with v-if
- 6:14When branches are very similar
- 8:26When not to create a new component
- 11:14Courses
related talks
24mState of Components
26mPhenomenal Design Patterns In Vue
29mAdvanced Vue.js features and patterns in the enterprise
22mWays to architecture your vue/nuxt app
37mPatterns for Large Scale Vue.js Applications
58m7 Secret Patterns Vue Consultants Don't Want You to Know
44m7 Secret Patterns Vue Consultants Don’t Want You to Know
34mComponent Documentation Made Easy