Building Component with Primitives using Radix Vue
summary
Prototype popover-plus-search list is first built from scratch and shows positioning, focus-trap and keyboard-accessibility bugs; swapping to Radix Vue’s unstyled primitives fixes them. Implementation uses Popover and Combobox primitives with props like side/offset/align, v-model for selected and searchTerm, displayValue to clear input, and prioritized auto-positioning; keyboard arrows/home/end, Enter selection, and auto-scroll all work in the demo. Tree-shaking improves on Vue 3.4 and the primitives interoperate with other UI libraries.
AI-written summary · about
chapters (6)
- 0:00Introduction
- 1:04The challenge of UI libraries
- 6:12Building from scratch
- 10:25Introducing Radix Vue
- 14:04Refactoring with Radix Vue
- 17:33Q&A and community resources
related talks
28mBuilding reusable UI components in Vue
26mSo You Think You Can Build A Dropdown?
30mPrimeVue | The Next-Gen UI Component Library
07mBuild Your Own Component Library, With `Shadcn-vue`
52mResearching and Writing Accessible Vue ... Thingies
30mPrimeVue, The Next-Gen UI Component Suite
40mBuilding Accessible Reusable Components
42mReusable Widgets That Work!