Building reusable UI components in Vue
summary
Step-by-step build of a reusable Vue dropdown: templates, v-model binding, v-bind, computed props, emits and slots, plus transitions and ref-based positioning; adds keyboard support and a virtualized list that handles thousands of items (demo shows ~3,000) and a dataset of ~115 beers. Claims: modular small components, docs and tests (mentions ~600 runs), tradeoffs between custom vs OSS vs vendor; Kendo ships ~70 components with 17 themes to skip building everything.
AI-written summary · about
chapters (24)
- 0:00Start
- 1:56Components in Vue.js
- 2:24Reusable UI Components - idea
- 2:58Types of Reusable UI Components
- 4:21Reusable UI Components - process of creation
- 5:49Simple Dropdown in Vue.js - demo
- 7:16DropDown UI designs
- 8:06DropDown UI Components - DropDownList
- 8:27DropDown UI Components - ComboBox
- 8:56DropDown UI Components - Important
- 9:26Different parts of DropDownList UI Component
- 10:00Simple dropdown item
- 10:34Classes in Vue.js and others libraries
- 11:37Event handling and triggering
- 14:02Popup component-transitions
- 15:01Position and portals
- 16:11Pass down a ref element
- 16:47List container-styles in Vue.js
- 17:33Templates via slots in Vue.js
- 18:19Slots with v-for
- 18:34Virtual scroll-live demo
- 24:46More complex UI Components - dilemmas
- 26:15Kendo DropdownList with 17 skins
- 26:35Kendo ThemeBuilder
related talks
39mVue.js - developer friendly, fast and versatile
31mBuilding Components for Vue 2&3 - an Attempt at solving the challenge
36mReusable components: maintain clean code efficiently
26mBuilding Awesome UI Apps with VUE
32mVue, simple yet scalable
36mHow to Create 'Vuetiful' Data-Driven User Interfaces
01h 03mVue.js is going to take the world
30mBuilding Component with Primitives using Radix Vue