Unlocking Reusability Generically Typed Vue.js Components
summary
Shows how to add TypeScript generics to Vue 3 components using the new generic attribute, composition API patterns, conditional types and the DefineModel macro. Builds typed Input and Select components that keep v-model types consistent between number and string modes, enable slot-prop autocompletion without mapping, and surface mismatches as compile-time errors suitable for CI. Demonstrates a generic context-menu pattern, explains constraints and trade-offs, and shows the approach works end-to-end with runtime behavior unchanged.
AI-written summary · about
chapters (6)
- 0:00Generics in TypeScript
- 6:07Generic Vue.js components
- 8:36Input type conflicts
- 13:58Reusable select components
- 24:33Advanced patterns
- 27:04Q&A
related talks
10mGeneric Components with TS and React
47mVue.js and TypeScript: Working Together like Peanut Butter & Jelly
29mTips & Tricks for your Vue 3 applications
31mVue 3 and Typescript
31mBuilding Components for Vue 2&3 - an Attempt at solving the challenge
30mEmpowering Vue with TypeScript, Inversify, Vuex and some other super to
29mTypescript + Vue @ Politico
44mVue 3: A Maturation of the Platform