20 Ways to Define Props in Vue from Mundane to Deranged
summary
Lists twenty concrete ways to declare Vue props, from plain string arrays to TypeScript-driven compiler macros, and demonstrates what actually runs in the browser versus what requires a build step. Shows DefineProps macro with type generics and withDefaults, explains modelValue + update:modelValue pairing and the DefineModel convenience, covers JSX via defineComponent, validator/default/function semantics, and a CodePen proof-of-concept for a dangerous useMagicProps hack that dynamically injects props — it partially works in the demo but is explicitly discouraged.
AI-written summary · about
chapters (15)
- 0:00Introduction to props
- 1:11Basic prop definitions
- 3:39Adding type safety
- 5:05Required props and defaults
- 8:20Prop validators
- 10:27Runtime vs build time
- 13:46Script setup magic
- 19:26TypeScript with props
- 24:25Default values in TypeScript
- 26:14Extending base props
- 29:02Model value simplification
- 32:17JSX components in Vue
- 35:03Unhinged prop hacks
- 41:49Magic props demonstration
- 42:54Q&A and closing remarks
related talks
13mIntroduction to Vue Macros
25mCommon Mistakes in Vue.js and How to Avoid Them
32mUnlocking Reusability Generically Typed Vue.js Components
35mCommon Mistakes in Vue.js and How to Avoid Them
02mVue Code-Shaving: Shorthands to a Cleaner Template Block
13mUsing and creating Vue directives
23m6 Levels of Vue Component Reusability
46mComposable Vue 3