Component

The <SocialShare> component is the primary way to add social share buttons to your site.

Each component instance provides a share button for a single social network, that you must select with the required network prop; you will need to use it as many times as your total needed networks.

Use

<!-- basic use -->
<SocialShare network="facebook" />

<SocialShare network="x" />

<SocialShare network="linkedin" />

<!-- customization with props -->
<SocialShare network="facebook" :styled="true" :label="false" />

Rendered HTML

The component will render by default the following minimal HTML:

<a
  class="social-share-button social-share-button--{network}"
  href="{share url}"
  style="--color-brand: {network brand color};"
  aria-label="Share with {network}"
  target="_blank"
>
  <svg class="social-share-button__icon">{...}</svg>
  <span class="social-share-button__label">Share</span>
</a>

Additionaly:

• a social-share-button--styled class will be added to the <a> element if :styled="true"
• the <span> element will be rendered conditionally according to the label prop.
• the <svg> element will be rendered conditionally according to the icon prop.

Props

network

• Required: Yes
• Type: String
• Default: none

The social network or messaging service where the content should be shared, to be chosen among the list of supported networks. This is required for the component to work.

styled ✳️

• Required: No
• Type: Boolean
• Default: false

Whether the component should be styled or not. It is false by default to allow for easier custom styling. Additional customization is possible also when set to true.

label ✳️

• Required: No
• Type: Boolean
• Default: true

Whether the text label should be rendered or not.

icon ✳️

• Required: No
• Type: Boolean
• Default: true

Whether the icon should be rendered or not.

url

• Required: No
• Type: String
• Default: the current page URL

The URL that will be shared on the selected social network. Defaults to the current page URL. On most cases you don't need another value, but if you need to change it, you can set it with this prop.

title

• Required: No
• Type: String
• Default: none

Title used as a parameter of the sharing URL, in networks that support it. Optional, check the list of supported networks.

user

• Required: No
• Type: String
• Default: none

Username used as a parameter of the sharing URL, in networks that support it. Optional, check the list of supported networks.

hashtags

• Required: No
• Type: String
• Default: none

Comma separated list of hashtags used as a parameter of the sharing URL, in networks that support it. Optional, check the list of supported networks.

image

• Required: No
• Type: String
• Default: none

Image path used as a parameter of the sharing URL, in networks that support it. Optional, check the list of supported networks.

Slots

label

Used to customize the button's label. Optional, defaults to "Share" if not provided.

Example:

<!-- Custom label, renders the network name -->
<SocialShare
  v-for="network in ['facebook', 'x', 'linkedin', 'email']"
  :key="network"
  :network="network"
>
  <template #label>{{ network }}</template>
</SocialShare>

icon

Used to customize the button's icon. Useful when another icon style is required. Optional, defaults to the internal style icons if not provided. Both a raw svg or a custom component can be used.

Works nicely with the NuxtIcon module, if used.

<!-- Custom icon -->
<SocialShare
  v-for="network in ['facebook', 'x', 'linkedin', 'email']"
  :key="network"
  :network="network"
>
  <!-- Either with a custom SVG ... -->
  <template #icon><svg>{...}</svg></template>
  <!-- ... OR with a component, i.e. from NuxtIcon -->
  <template #icon><Icon name="mdi:${network}" /></template>
</SocialShare>

Styling

The <SocialShare> component comes unstyled by default, only providing some minimal flex properties to correctly align icon and label, to allow for easy integration in any kind of UI. This behavoir can be easily overridden by using the :styled="true" prop.

Both the styled and unstyled versions can be further customized, mainly by working directly with its CSS. In addition to the CSS classes shown above, each button also has a local --color-brand CSS variable, that can be used to customize each instance.

Some examples of customization can be found it the styling page