Very few people write Vue components originally intending them to be open-sourced. Most of us start out writing components for ourselves - we have a problem, and then decide to solve it by building a component. Sometimes we find ourselves wanting to solve the same problem in new locations in our codebase, and so we take our component and refactor it a bit to make it reusable. Then we want to use it in a different project, and so we move it out into an independent package. And then we think “hey, why not share this with the world?”, and so we open-source the component.
On the one hand, this is great, it means a large and growing availability of open-source components out there for anyone working in Vue (a search for “vue” on npmjs.com turns up over 12000 packages).
On the other hand, because most of these components evolved from a specific situation, and not all of us have experience designing components for reuse across many environments, many of these components do not “play nice” with the Vue ecosystem.
What does it mean to “play nice”? At a high level, it means behaving in a way that feels natural to Vue developers, and that is easy to extend and integrate into any sort of application.
After exploring a wide range of open source components, here’s what I think goes into making a Vue component that plays nice:
- Implement v-model compatibility
- Be transparent to events
- Assign attributes to the right elements
- Embrace browser norms for keyboard navigation
- Use events preferentially over callbacks
- Limit in-component styles