✨ 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
Top comments (0)