A new version of Nuxt Social Share has been released, providing enhanced customization features! 🚀

✨ A new version of "Nuxt Social Share" module has been released!

⚙️ New features in v0.7.0 include the ability to customize both the label and the icon of each social share button, enhancing its customization capabilities.

New Features

Label and icon can now be easily customized with dedicated slots, this leads to:

• improved design options: it is now possible to set up label-only buttons by disabling the icon rendering.
• better integration with your custom design: you can now use any icon style you need, instead of relying on the defaults provided by the module.
• support for localization: being able to customize the label (and the aria-label attribute) means that you can now localize the component in any language you need to provide in your app.

Example

To customize label and icon, you can use the provided slots:

<SocialShare
  v-for="network in ['facebook', 'twitter', 'linkedin']"
  :key="network"
  :network="network"
>
  <!-- Custom icon, i.e. from NuxtIcon -->
  <template #icon><Icon name="mdi:${network}" /></template>
  <!-- Custom label, renders the network name -->
  <template #label>{{ network }}</template>
</SocialShare>

Detailed examples and full documentation is available on the repository's readme

Installation & update

Installing or updating the module is as simple as running

npx nuxi@latest module add nuxt-social-share

this nuxi command will:

• install the module as a dependency using your package manager
• add it to your package.json file
• update your nuxt.config file