ktallafus / vue-compound-components

Two examples on how to write "compound components" in Vue 3. They're more popular in the React world but possible to do in Vue also.

Basic Vue 3 demo about writing components like this:

<MyDropdown v-model="myDropdownValue">
  <MyDropdownOption value="hi"/>
  <MyDropdownOption value="hey"/>
  <MyDropdownOption value="hello"/>
</MyDropdown>

In this repository, there are examples for:

• dropdown
• table

This technique is called compound components - see Kent Dodds's original React article

More Vue examples of compound components

• Headless UI Dropdown menu and its code - make sure to check out the rest of the components too. They're also compound
• Element Plus table and its code - it's crazy