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>

Avoiding duplication with the networks option

If you've set the networks module option to restrict which networks get bundled, you've already declared the exact list you want to render, there is no need to also hardcode it in your component. Read it back from the runtime config instead:

<template>
  <div class="flex gap-2 justify-center flex-wrap">
    <SocialShare
      v-for="network in networks"
      :key="network"
      :network="network"
      :styled="true"
      :label="false"
      class="rounded-none"
    />
  </div>
</template>

<script setup>
const { networks } = useRuntimeConfig().public.socialShare
</script>

This way, adding or removing a network only requires updating nuxt.config.ts in one place: your component picks it up automatically, and it can never drift out of sync with your networks allow-list.