Vue3 Challenge: ButtonsGroup

Let's say we want to make a component similar to q-button-group.

As a Developer I need 2 components TButton and GroupRender so that I can style TButton independently and create groups just by putting those buttons inside the GroupRender.

Given Vue Template should result into Resulting HTML.

Vue Template

<div class="flex flex-col justify-center items-center min-h-screen space-y-8"> <div> <TButton label="One" /> </div> <div> <GroupRender> <TButton label="Two" /> <TButton label="Three" /> </GroupRender> </div> </div> 

Resulting HTML

<div class="flex flex-col justify-center items-center min-h-screen space-y-8"> <div> <button class="border rounded-lg px-4 py-2 hover:bg-gray-100">One</button> </div> <div> <div class="border rounded-lg flex divide-x"> <div> <button class="px-4 py-2 hover:bg-gray-100">Two</button> </div> <div> <button class="px-4 py-2 hover:bg-gray-100">Three</button> </div> </div> </div> </div> 

See result

How to submit?

1. Write in the comments "Challenge accepted".
2. Fork stackblitz project and send a new link with your solution as a reply to your original comment.

Unit tests are good to have, but optional.

Share useful articles in the comments.

In a meantime I will start working on a tutorial and a solution. Don't miss it - subscribe to discussion and follow me.