Examples

Localization

How to provide social sharing buttons in your needed languages.

Localized strings

The <SocialShare> component comes with two localized strings, provided by default in English:

the rendered label inside the button
the value of the aria-label attribute, used for accessibility purposes

To fully localize the component in your needed languages, you only need to override their default values:

to localize the label, you can use the label slot
to localize the aria-label attribute, just pass it the <SocialShare> component

Example

The following example fully localizes the component in Italian:

<SocialShare
  v-for="network in ['facebook', 'x', 'linkedin', 'email']"
  :key="network"
  :network="network"
  :aria-label="`Condividi con ${network}`"
>
  <template #label>Condividi</template>
</SocialShare>

When customizing the aria-label attribute, make sure that values are unambiguous for people using assistive technologies. An easy way to solve this is using the network name as part of it, instead of i.e. "share button"

Composable

How to use the 'useSocialShare' composable.

Dynamic baseUrl

How to use dynamic values for the required "basUrl" option.