Usage
Composable
How to use the 'useSocialShare' composable.
Using the customizable component is the main intended way to use "Nuxt Social Share", as it should cover almost every use case.
Hovewer, the useSocialShare composable, that is also used internally to create the <SocialShare> components, is also available to be used directly if your project require even more flexibility.
Like the component, one instance of useSocialShare should be used for every needed share.
Use
<script setup>
// Basic minimal use, network property is required
const shareFacebook = useSocialShare({ network: 'facebook' })
</script>
<script setup>
// All possible options
const shareFacebook = useSocialShare({
network: 'facebook', // Required!
url: 'https://www.example.com', // Optional, defaults to current page URL if not provided
title: 'My Custom Title', // Optional, available on networks supporting it
user: 'twitter_user', // Optional, available on networks supporting it
hashtags: 'list,of,hashtags', // Optional, available on networks supporting it
image: 'https://www.example.com/path/to/image.jpg', // Optional, available on networks supporting it
})
</script>
Output
The composable returns the following object:
{
"name": "facebook", // Name of the selected social network
"shareUrl": "https://www.facebook.com/sharer/sharer.php?u=https://www.example.com", // Sharing url
"icon": {
"viewBox": "0 0 24 24",
"path": "M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"
}, // SVG Icon attributes
"color": "#0866FF" // Main brand color of the selected network
}
You can then use some or all the returned properties, according to your project setup and requirements.
Since the composable only returns raw data, you must create from scratch your own HTML structure and make sure that everything works as you desire.