Menu

1 / 2

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

DEV Community·yuelinghuashu·5 months ago
#LzybCSmc
#dev#button#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 .…

Continue reading — create a free account

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