Menu

Post image 1
Post image 2
1 / 2
0

Vue 3 Simple Component Development: API Design from the Button Component

DEV Community·yuelinghuashu·3 months ago
#LzybCSmc
#dev#button#fullscreen#loading#article#ama
Reading 0:00
15s threshold

Minimalism is not crudeness, restraint is not deficiency — drawing inspiration from Nuxt UI v4, how to design a well-crafted component API This article covers : Props definition, variant system ( variant + color ), size trade-offs (why remove xs / xl ), slot design ( label prop vs default slot), loading state handling (including CLS prevention), accessibility attributes, and a comparison table with mainstream UI libraries. I. Background and Reference In previous articles, we discussed the concept of design tokens over atomic CSS, and the architecture of CSS-first + thin component wrappers. But one question remains unanswered: How should a single component's API be designed? Early in the design process, I deeply referenced Nuxt UI v4's approach. Nuxt UI v4 consolidates complex styles and interactions into a few core dimensions — variant / color / size . This is exactly what I wanted: encapsulate complexity inside the component , exposing only the most streamlined API to the outside.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More