DEV Community

Cover image for Vue3 Challenge: ButtonsGroup
Aleksey Razbakov
Aleksey Razbakov

Posted on

2 2

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay