Using multiple buttons

Multiple buttons

The <SocialShare> component provides only a single social share button for a specific network.

Since you will typically need to add multiple instances to cover all your desired networks, a wise and simple approach is to iterate the component with a v-for:

<SocialShare
  v-for="network in ['facebook', 'x', 'linkedin', 'email']"
  :key="network"
  :network="network"
  :styled="true"
/>

Reusable component

If you need to place these share buttons in multiple places of your website/app, to avoid code duplication and to keep visual consistency, you can create a custom wrapper component that will provide both logic and custom styling.

<template>
  <div class="flex gap-2 justify-center flex-wrap">
    <SocialShare
      v-for="network in ['facebook', 'x', 'linkedin', 'email']"
      :key="network"
      :network="network"
      :styled="true"
      :label="false"
      class="rounded-none"
    />
  </div>
</template>